javascript - 在 Stack Navigator 中使用 navigation.openDrawer

Question

我正在尝试使用 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; 

标签： javascriptreact-nativereact-navigationjsx

Answer 1

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

但是，要解决此问题，请考虑将道具传递给headerTitle类似Stack.Screen option的

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