Question

我正在寻找使用DrawerNavigator以及StackNavigator所以我可以为我的屏幕显示一个标题，一切正常但我搞砸了路由器逻辑，我的问题是抽屉不渲染项目而只是第一个之一。

const Router = StackNavigator({
    Home: {screen: Screen1},
    Other: {screen: Screen2}
}, {
    navigationOptions: {
        headerStyle: {backgroundColor: '#333333'},
        headerTintColor: '#fff'
    }
});

const Drawer = DrawerNavigator({
  App: {screen: Router},
});

export default Drawer;

有人可以解释为什么我只看到抽屉里的第一件物品吗？在尝试修复时，我向抽屉配置路由器添加了第二个项目

const Drawer = DrawerNavigator({
  App: {screen: Router},
  App: {screen: Router},
});

它向抽屉添加第二个项目，但标题错误，它使用屏幕1的标题，但链接正确，它重定向到第二个屏幕。那么如何修复这些标签？

Answer 1

更好的方法是使用自定义“contentComponent”创建drawernavigator。通过这种方式，您可以更好地控制要在抽屉中显示的标题，点击标题，它必须导航到哪个屏幕，drawernavigator的背景颜色。

Answer 2

所以DrawerNavigator就是这样实例化的（来自文档）：

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

因此，通过做你第一次做的事情：

const Drawer = DrawerNavigator({
  App: {screen: Router},
});

，你告诉DrawerNavigator只有一个元素要添加到抽屉菜单中，无论“Router”包含什么屏幕，对于DrawerNavigator它只是一个元素。

因此，为了正确地将您的屏幕添加到抽屉：

const HomeRoute = StackNavigator({
    Home: {screen: Screen1},
}, {
    navigationOptions: { ... }
});

const OtherRoute = StackNavigator({
    Other: {screen: Screen2},
}, {
    navigationOptions: { ... }
});

const Drawer = DrawerNavigator({
  Home: { screen: HomeRoute },
  Other: { screen: OtherRoute }
});

export default Drawer;

在React Native中使用DrawerNavigator显示标题

2 个答案: