如何在 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())