是否可以在本机反应中动态加载选项卡？

Question

我正在尝试在本机反应中实现动态标签栏。是否可以在本机反应中实现动态标签栏。如果可能的话？请给我指导来实现它。所有选项卡选项都来自 API。

Answer 1

您可以动态构建选项卡。有很多选择。我建议将redux 与react-navigation 结合使用。但请记住，它们不可能是 100% 动态的。您必须有预定义的屏幕或堆栈。在代码中它看起来像这样：

// Let us assume that you fetched the data from your API and mapped them into this kind of options
let options = {
  Home: {
    screen: HomeStack,
  },
};

let authOptions = {
  Auth: {
    screen: AuthStack,
  },
};

let DynamicTabs = ({routes, tabOptions=defaultTabOptions}) => {
  return createBottomTabNavigator(routes, tabOptions);
};

let ConstructRoutes = ({userLoggedIn}) => {
  if (userLoggedIn) {
    return <DynamicTabs routes={options}  />;
  }
  return <DynamicTabs routes={authOptions} />;
};
export default connect(({user})=>({userLoggedIn:!!user.token}))(ConstructRoutes)

如果这还不够，请查看this answer。