繁体   English   中英

react-navigation 使用自定义抽屉从 v1 迁移到 v5

[英]react-navigation migrate from v1 to v5 with custom drawer

我正在更新使用react-navigation v1 的 react-native 应用程序。 现在要将其升级到 v5.x,我正在为自定义抽屉配置而苦苦挣扎。 旧的stackdrawer看起来像

// 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM