Question

如何制作导航抽屉在右侧的React Native幻灯片中，我尝试了位置：正确，但不起作用

 export default createDrawerNavigator({

 Home:{
 screen: AppStackNav,
 navigationOptions: {
  drawerIcon: ({tintColor}) => (
    <Icon name = 'ios-home' style={{fontSize:24, color: tintColor}}/>
  ),
  drawerLabel: "Home",

}},

Setting: {
screen: SettingScreen,
navigationOptions: {
    drawerLabel: "Setting",
    drawerIcon: ({tintColor}) => (
      <Icon name = 'ios-settings' style={{fontSize:24, color: tintColor}}/>
    )}},
{
    contentComponent: CustomDrawerComponent

  },{
   drawerPosition: 'right',}

);

Answer 1

缺少组件的右括号，并且 drawerPosition 应该是关闭组件的括号后的第一个参数。现在工作正常。

const Hello = createDrawerNavigator({
     Home:{
     screen: AppStackNav,
     navigationOptions: {
      drawerIcon: ({tintColor}) => (
        <Icon name = 'ios-home' style={{fontSize:24, color: tintColor}}/>
      ),
      drawerLabel: "Home",

    }},

    Setting: {
    screen: SettingScreen,
    navigationOptions: {
        drawerLabel: "Setting",
        drawerIcon: ({tintColor}) => (
          <Icon name = 'ios-settings' style={{fontSize:24, color: tintColor}}/>
        )}}
      },{
       drawerPosition: 'right',},
    {
        contentComponent: CustomDrawerComponent

      }

    );

Answer 2

反应导航v5

import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

然后在Drawer.Navigator上

drawerPosition =“正确”

像这样

   <Drawer.Navigator
      drawerPosition="right"
      initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
   </Drawer.Navigator>

CreateNavigationDrawer右侧React Native

2 个答案: