Question

我试图弄清楚如何使用react-navigation在React Native应用程序中实现导航，使其与Uber应用程序相似。

我想使用包含“设置”，“配置文件”之类的菜单项的“抽屉”。单击每个项目应打开一个带有导航堆栈的模态，该堆栈带有向左箭头或顶部（标头）上的十字图标按钮，以关闭堆栈并返回到主屏幕。当带导航堆栈的模式打开时，我想禁用抽屉。

这可以通过反应导航来实现吗？

Answer 1

是，反应导航抽屉接受任意反应成分作为内容。您可以通过在手机上运行https://expo.io/@react-navigation/NavigationPlayground来查看示例。

https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/src/Drawer.tsx

中的一些示例代码

const InboxStack = createStackNavigator(
  {
    Email: { screen: EmailScreen },
    Inbox: { screen: InboxScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <MaterialIcons
          name="move-to-inbox"
          size={24}
          style={{ color: tintColor } as StyleProp<TextStyle>}
        />
      ),
      drawerLabel: 'Inbox',
    },
  }
);

const DraftsStack = createStackNavigator(
  {
    Drafts: { screen: DraftsScreen },
    Email: { screen: EmailScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <MaterialIcons
          name="drafts"
          size={24}
          style={{ color: tintColor } as StyleProp<TextStyle>}
        />
      ),
      drawerLabel: 'Drafts',
    },
  }
);

const DrawerExample = createDrawerNavigator(
  {
    Drafts: {
      path: '/sent',
      screen: DraftsStack,
    },
    Inbox: {
      path: '/',
      screen: InboxStack,
    },
  },

  {
    contentOptions: {
      activeTintColor: '#e91e63',
    },
    initialRouteName: 'Drafts',
  }
);

React Native应用中的类似Uber的抽屉导航

1 个答案: