React native - undefined 不是 object ('evaluating this.props.navigation')

Question

预期行为：应在 header 中打开一个包含菜单图标的抽屉。

当前行为：错误消息 undefined is not an object ('evaluating this.props.navigation')

搜索错误对我没有帮助。

我将导航分成两个文件： RootNavigation.js 和 MainTabNavigation

RootNavigation.js

const AppNavigator = createSwitchNavigator({

  Main: MainTabNavigator,
});
const DrawerStack = createDrawerNavigator({
  Home: {
    screen: AppNavigator
  },
  Login: {
    screen: login
  },
  Signup: {
    screen: signup
  }
});

export default class RootNavigation extends React.Component {
  componentDidMount() {
    this._notificationSubscription = this._registerForPushNotifications();
  }

MainTabNavigation.js

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),   
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Shops',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-list${focused ? '' : '-outline'}` : 'md-list'}
    />
  ),
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Cart',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-cart${focused ? '' : '-outline'}` : 'md-cart'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

MainTab 文件，它在 header

中显示一个图标

static navigationOptions = ({navigation}) =>({
  title: 'Home',
  headerLeft: <Ionicons 
                name="md-menu" 
                size={25} 
                color="blue" 
                style={{ margin: 7,}}
                onPress={() => this.props.navigation.navigate('DrawerOpen')} 
                />
});

Answer 1

如文档here中所述，当navigationOptions用作函数时，this不引用组件的实例；所以 this.props 不可用。

相反，您需要替换：

this.props.navigation.navigate('DrawerOpen')

与：

navigation.navigate('DrawerOpen')

或者，您可能想要使用示例 here 中所示的 navigation.openDrawer() 助手，因为导航到 DrawerOpen 意味着您想要导航到具有该名称的屏幕.

Answer 2

你必须知道这一点，当你像这样创建组件 class

class MyComponent extends ....

如果你想使用任何道具，你必须写这个KeyWord例如

this.props.navigation.nvigate()

但是如果你像这样创建带有箭头函数的组件

const Mycomponent = (props) => {}

你不需要这个KeyWord，对于call props你必须这样写

 props.navigation.navigate()

在你的情况下，如果在 Navigation 选项中使用组件，你不需要这个或 props KeyWord，只需写

 navigation.navigate()

React native - undefined 不是 object ('evaluating this.props.navigation')

React native - undefined is not an object ('evaluating this.props.navigation')

react-native

tabs

navigation

expo

drawer