React Native Navigation--试图根据屏幕改变抽屉。

Question

我创建了一个新的项目，有一个当前工作的抽屉和汉堡包菜单，但是我目前正试图根据活动页面改变抽屉中显示的内容。由于数据的原因，我不能很容易地分享代码......但我会分享我可以分享的东西，并给出一个剩下的例子。目前我有

app.js 文件

import Drawer from './routes/homeStack.js';
    export default() => {
       return (
         <NavigationContainer>
            <Drawer />
         </NavigationContainer>
       );
    };

我有一个 home.js 文件，在闪屏后首先加载。

然后，我有另外两个屏幕。 contact.js 和 info.js.

我有工作导航到所述的屏幕，这将显示适当的观点。

但我被卡住的是，我试图交换抽屉的内容，使它们显示不同的选项。例如，每个页面的抽屉是这样的。

home.js 抽屉：    联系我们信息

contact.js 抽屉。    首页 电邮我们 电话我们

info.js 抽屉。    首页 关于我们

我是React Native的新手，所以我不知道是否有什么地方需要在 app.js 以使其根据当前的屏幕显示不同的方式加载抽屉。

任何额外的信息，任何人都可以提供是赞赏。我已经用尽了其他google和stak搜索，但似乎找不到任何东西。

Answer 1

你需要实现自定义 contentComponent 用于您的抽屉

const DrawerNavigatorConfigLeft = {
  contentComponent: 
  props => <Menu {...props} />, // <-- implement Custom Menu

};

Drawer = createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

而你的 Menu 组件将是这样的。

class Menu extends React.Component {
  render() {
    /**
     * Get currentRoute 
     * from this.props.descriptors...
     */
    const currentRoute = ...;

    switch (currentRoute) {
      case 'Home':
        return (
          /* Menu Items for Home screen */ 
        );
      case 'Contact':
        return (
          /* Menu Items for Contact screen */ 
        );
        ...
    }

  }
}