[英]react-navigation migrate from v1 to v5 with custom drawer
我正在更新使用react-navigation
v1 的 react-native 应用程序。 现在要将其升级到 v5.x,我正在为自定义抽屉配置而苦苦挣扎。 旧的stack
和drawer
看起来像
// version 1
const Screens = StackNavigator(
{
Home: { screen: HomeScreen },
Login: { screen: LoginScreen },
Registration: { screen: RegistrationScreen },
// and some more
},
{
initialRouteName: "HomeScreen",
navigationOptions: {
headerStyle: {
backgroundColor: "black"
},
headerTintColor: "white",
headerTitleStyle: {
fontWeight: "normal",
marginLeft: 30
}
},
cardStyle: {
backgroundColor: 'black',
}
}
);
export const Drawer = DrawerNavigator({
Stack: {screen: Screens}
}, {
contentComponent: CustomDrawer,
drawerWidth: Dimensions.get('window').width
}
);
呈现像;
render() {
return (
<View style={{ flex: 1 }}>
<StatusBar backgroundColor="black" barStyle="light-content" />
<Drawer />
</View>
);
}
现在在第 5 版,我有类似的堆栈;
const Stack = createStackNavigator();
const StackScreens = () => (
<Stack.Navigator
initialRouteName="Home"
headerMode="screen"
screenOptions={{
headerTintColor: 'white',
headerStyle: {backgroundColor: 'black', marginLeft: 30, fontWeight: 'normal'},
cardStyle: {backgroundColor: 'black'},
}}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} options={{title: ''}} />
<Stack.Screen name="Registration" component={RegistrationScreen} options={{title: ''}} />
</Stack.Navigator>
);
但是对于抽屉,我不明白 v1 中RouteConfigs
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
的 RouteConfigs 改成什么?
所以像下面这样的东西不起作用
const Drawer = createDrawerNavigator();
const DrawerScreens = () => (
<Drawer.Navigator drawerContent={CustomDrawer} screenOptions={StackScreens}></Drawer.Navigator>
);
// and render
render() {
return (
<NavigationContainer>
<DrawerScreens />
</NavigationContainer>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.