如何在React Navigation v3中创建动态标签页

Question

我用应用容器包装了堆栈导航器：

const AppNavigator = createStackNavigator({
  Home: {
    screen: Home,
  },
});

export default createAppContainer(AppNavigator);

首页应具有动态标签。我想从后端加载一些信息，然后生成标签。

这是我的 Home 组件：

class Home extends Component {
  get tabs() {
    return {
      Main: { screen: Demo },
      World: { screen: Demo },
    };
  }

  get tabOptions() {
    return {
      // options...
    };
  }

  render() {
    const Tabs = createMaterialTopTabNavigator(this.tabs, this.tabOptions);
    return <Tabs />;
  }
}

在这种情况下，我会收到此错误：

但是如果我用createAppContainer包装...

const Tabs = createAppContainer(createMaterialTopTabNavigator(this.tabs, this.tabOptions));

...然后我收到关于应用程序中多个容器的警告。

那么如何以正确的方式制作动态标签？

---

UPD 1。。我现在使用带有黄色警告的获取标签的真实代码。

get tabs() {
  const { categories } = this.props;
  return reduce((acc, item) => assoc(prop('name', item), Demo, acc), {})(categories); // ramda
}

Answer 1

之所以出现此错误，是因为将导航器作为组件包装起来是反模式的，因为那样会破坏导航道具。

相反，请不要使用类，使用简单的函数，否则您将像其他尝试使用组件的人一样挣扎

function tabs(){
   return {
      Main: { screen: Demo },
      World: { screen: Demo },
    }
  }

  function tabOptions(){
    return {
      // options...
    };
  }

  export default createMaterialTopTabNavigator(tabs(), tabOptions())