如何解决如何使用 navigation.openDrawer() 在 React Native 中打开抽屉
我想创建一个汉堡图标来打开抽屉,但一直无法做到。我在标题右侧包含了图标按钮。每当我单击它打开抽屉时,它都会显示未定义函数的错误。我在下面提到了错误。
类型错误:navigation.openDrawer 不是函数。 (在 'navigation.openDrawer()' 中,'navigation.openDrawer' 未定义)
这是 App.js,这里我提到了使用 createDrawerNavigator() 的 drawer 代码
App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import PassengerScreen from './Passenger';
import lovedones from './lovedones';
import NewTab from './FirstScreen';
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
export default App=() => (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Passenger" drawerPosition="right" >
<Drawer.Screen name="Passenger" component={PassengerScreen} options= {{ title:'Passenger'}} />
<Drawer.Screen name="lovedones" component={lovedones} options= {{ title:'loved ones!!'}} />
<Drawer.Screen name="New Screen" component={NewTab} />
</Drawer.Navigator>
</NavigationContainer>
);
这是 AccountScreen.js,在这段代码中,我创建了使用 navigation.openDrawer() 来打开抽屉的图标按钮
AccountScreen.js
import * as React from 'react';
import { View,Text,StyleSheet,Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createDrawerNavigator } from '@react-navigation/drawer';
const Stack= createStackNavigator();
Account = () => {
return <View style={styles.container}>
<Text>Hello!!</Text>
</View>
};
export default AccountStack =(navigation)=>(
<Stack.Navigator >
<Stack.Screen name="Account" component= {Account} options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={40} backgroundColor= {"none"} onPress={() => navigation.openDrawer()}/> ) }} />
</Stack.Navigator>
);
const styles = StyleSheet.create({
container: {
flex: 1,alignItems: 'center',justifyContent: 'center',},});
请帮助我找出错误。
解决方法
问题出在这一行
export default AccountStack =(navigation)=>
。
此处您的导航变量指向 props 而不是 props.navigation。
要解决此问题,您应该从道具中解构导航对象并将此行更改为
export default AccountStack =({navigation})=>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。