在 Stack Navigator 中使用 navigation.openDrawer答案

【问题标题】：Using navigation.openDrawer in Stack Navigator在 Stack Navigator 中使用 navigation.openDrawer
【发布时间】：2021-06-01 09:18:20
【问题描述】：

我正在尝试使用 Stack Navigator 中的导航道具在单击材质图标时打开抽屉。但是，当我单击按钮时，我收到错误：

未定义不是对象（评估 navigation.openDrawer）

我很困惑，因为我已将导航道具传递给“应用程序”功能。我哪里错了？

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;

【问题讨论】：

标签： javascript react-native react-navigation jsx

【解决方案1】：

navigator 中的导航属性只存在于一个 Navigator 中，不同的 Navigator 会有不同的导航属性（例如 Stack Navigator 导航将不有 openDrawer 方法）。我认为你想要完成的是：

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

【讨论】：

【解决方案2】：

您需要将您的 App 组件从根组件包裹在 <NavigationContainer/> 周围，以便能够在 App 组件级别访问 navigation。

但是，要解决此问题，请考虑将 props 传递给 Stack.Screen option 的 headerTitle 像这样

<Stack.Screen 
  name="Home"component={TheDrawer} 
  options={{
    headerTitle: (props) => (
      <View>
        <MaterialIcons
           name='menu'
           onPress={() => props.navigation.openDrawer()} size={28}
        /> 
      </View>
    )}} 
/>

【讨论】：