【问题标题】:Is It possible to load tab dynamically in react native?是否可以在本机反应中动态加载选项卡?
【发布时间】:2020-04-01 14:10:34
【问题描述】:

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

【问题讨论】:

标签: reactjs react-native tabbar tabview


【解决方案1】:

您可以动态构建选项卡。有很多选择。我建议将reduxreact-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

【讨论】:

  • 但没有预定义的屏幕限制。因为我的 API 给了我 n 个标签栏。那我能做什么呢。
猜你喜欢
  • 1970-01-01
  • 2015-06-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-07
  • 2012-05-10
  • 1970-01-01
  • 2023-01-03
相关资源
最近更新 更多