Question

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

使用React Native 0.59（已安装R eact-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());

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

Answer 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进行澄清。

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

1 个答案: