#react-native #react-navigation #react-native-navigation #react-navigation-drawer #react-native-drawer
Вопрос:
Я хотел создать значок гамбургера, чтобы открыть ящик, но не смог этого сделать. Я включил кнопку со значком справа от своего заголовка. Всякий раз, когда я нажимаю на него, чтобы открыть ящик, он показывает ошибку неопределенной функции. Я уже упоминал об ошибке ниже.
Ошибка типа: навигация.openDrawer не является функцией. (В «navigation.openDrawer ()», «navigation.openDrawer» не определен)
Это App.js, в этом я упомянул код для ящика с помощью createDrawerNavigator()
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, в этом коде я создал кнопку со значком, чтобы открыть ящик с помощью навигации.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',
},
});
Пожалуйста, помогите мне в выявлении ошибки.
Ответ №1:
Проблема в этой линии export default AccountStack =(navigation)=>
.
Здесь ваша переменная навигации указывает на реквизит вместо реквизита.навигация.
Чтобы исправить это, вам следует удалить объект навигации из реквизитов и изменить эту строку на
export default AccountStack =({navigation})=>