使用自定义抽屉将反应导航从v1迁移到v5

时间:2020-06-22 09:20:01

标签: reactjs react-native react-navigation react-navigation-v5 react-navigation-drawer

我正在更新使用0 v1的React-native应用程序。现在要将其升级到v5.x,我正在努力使用自定义抽屉配置。旧版react-navigationstack看起来像

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
    }
);

现在是第5版,我的堆栈就像;

render() {
    return (
       <View style={{ flex: 1 }}>
          <StatusBar backgroundColor="black" barStyle="light-content" />
          <Drawer />
       </View> 
    );
}

但是对于抽屉,我不了解v1中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> ); 的{​​{1}}更改为什么?

所以下面的内容不起作用

RouteConfigs

}

0 个答案:

没有答案