reactjs - 如何在 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

出现该错误是因为将导航器包装为组件是反模式，因为导航 Prop 会以这种方式被破坏。

相反，不要使用类，使用普通函数，否则你会像其他尝试使用组件的人一样陷入困境

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

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

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