2

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

使用React Native 0.59, Installed 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());

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

4

1 回答 1

3

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

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>

这里有一个例子来说明。

于 2019-07-31T10:27:44.370 回答