尝试使用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());型
现在，没有错误，但抽屉没有打开。
2条答案
按热度按时间ajsxfq5m1#
如果您试图从抽屉导航器的屏幕集之外打开抽屉，通常会出现这种情况。
this.props.navigation.toggleDrawer只有在Settings中才定义，我猜不是这样的。您可以重新安排导航，以便抽屉出现在您调用
toggleDrawer的屏幕上，或者您可以首先导航到Settings。字符串
Here is an example澄清。
vktxenjb2#
首先从“@react-navigation/native”导入导入{ DrawerActions};然后您可以像一样使用它
字符串