使用导航.opendraw在堆栈导航器

Question

我试图在我的堆栈导航器中使用导航道具，在点击材料图标时打开抽屉。然而，当我点击按钮时，我收到错误:

Undefined不是一个对象(求值navigation.openDrawer)

我很困惑，因为我已经将导航道具传递到"App"函数中。我哪里出错了?

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import HomeScreen from './src/screens/HomeScreen';
import SecondScreen from './src/screens/SecondScreen.js';
import {MaterialIcons} from '@expo/vector-icons';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

const TheDrawer = () => {
return(
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} /> 
<Drawer.Screen name="SecondScreen" component={SecondScreen} /> 
</Drawer.Navigator>
);
}
const App = ({navigation}) =>{
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen 
name="Home"component={TheDrawer} 
options={{headerTitle:
<View>
<MaterialIcons
name='menu' 
onPress={() => navigation.openDrawer()} size={28}
/>
</View>
}} 
/>
<Stack.Screen name="SecondScreen" component={SecondScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App; 

Answer 1

导航道具只存在于导航器中，不同的导航器会有不同的导航道具(堆栈导航器导航将NOT)例如，拥有opendraw方法)。我认为你想要完成的是:

const App = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen
name="Home"
component={HomeScreen}
options={({ navigation }) => ({
headerTitle: (
<View>
<MaterialIcons name="menu" onPress={() => navigation.openDrawer()} size={28}/>
</View>
),
})}
/>
<Drawer.Screen name="SecondScreen" component={SecondScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
};

或者，如果您希望菜单按钮在每个页眉上都可用:

const App = () => {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
screenOptions={({ navigation }) => ({
headerTitle: (
<View>
<MaterialIcons name="menu" onPress={() => navigation.openDrawer()} size={28} />
</View>
),
})}
>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="SecondScreen" component={SecondScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
};

来源:https://reactnavigation.org/docs/headers/

如果你需要访问更多的页面在这两个(Home, SecondScreen)，你可以这样创建它:

const HomeScreen = () => {
<Stack.Navigator>
<Stack.Screen name="Home1" component={HomeScreen1} />
<Stack.Screen name="Home2" component={HomeScreen2} />
<Stack.Screen name="Home3" component={HomeScreen3} />
</Stack.Navigator>
}

来源:https://reactnavigation.org/docs/nesting-navigators