导航抽屉未打开且未找到 toggleDrawer答案

【问题标题】：Navigation drawer is not opening and toggleDrawer not found导航抽屉未打开且未找到 toggleDrawer
【发布时间】：2019-07-31 09:42:06
【问题描述】：

尝试使用 React-Navigation 创建抽屉。

使用React Native 0.59，安装了React-Navigation 3.x，已经完成链接react-native link react-native-gesture-handler。

使用 React-Navigation 创建路由，称为 Route.js：

const Drawer = createDrawerNavigator(
  {
    Settings: {
      screen: HomeScene,
      navigationOptions: {
        title: 'Home',
        drawerIcon: () => (
          <Icon name="home" style={{ color: colors.white, fontSize: 24 }} type="Ionicons" />
        )
      }
    }
  },
  {
    contentComponent: props => <GlobalSideMenu {...props} />
  }
);

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScene,
      navigationOptions: {
        header: null
      }
    },
    Drawer: {
      screen: Drawer,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    initialRouteName: 'Home'
  }
);

export default createAppContainer(AppNavigator);

然后在标题中，抽屉图标：

 <Button icon transparent onPress={() => this.props.navigation.toggleDrawer()}>
      <Icon name={icon('menu')} type="Ionicons" style={styles.menuColor} />
 </Button>

它给了我错误：toggleDrawer() 未定义。

然后我把它改成：

this.props.navigation.dispatch(DrawerActions.toggleDrawer());

现在，没有错误，但抽屉没有打开。

【问题讨论】：

标签： react-native react-navigation react-navigation-drawer

【解决方案1】：

如果您试图从抽屉导航器的屏幕集之外打开抽屉，通常会出现这种情况。

this.props.navigation.toggleDrawer 仅在您位于 Settings 时才定义，我猜不是这样。

您可以重新排列导航，使抽屉出现在您调用toggleDrawer 的屏幕上，或者您可以先导航到Settings。

<Button
  icon 
  transparent 
  onPress={() => {
    this.props.navigation.navigate('Settings');
    this.props.navigation.dispatch(DrawerActions.openDrawer());
  }}
>
  <Icon name={icon('menu')} type="Ionicons" style={styles.menuColor} />
</Button>

Here is an example 澄清一下。

【讨论】：