React native 使用动态选项卡创建选项卡导航器

我比较确定我发现这是不可能的，但我想确定没有办法

有问题的应用程序以AppNavigator

StackNavigator

开始

export const AppNavigator=StackNavigator({
登录：{
屏幕：登录，
导航选项：（{navigation}）=>({
标题：“安梅尔登”，
参数：{
nuke:navigation.state.params&&！！navigation.state.params.nuke，
},
}),
},
主要内容：{
屏幕：DynamicTabBar，
导航选项：（{navigation}）=>({
标题：“后续行动”，
}),
},
}, {
模式：“模态”，
headerMode:“无”，
});
导出类AppWithNavigationState扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回
}
}
AppWithNavigationState.propTypes={
调度：React.PropTypes.func.isRequired，
navigationReducer:React.PropTypes.object.isRequired，
};
常量mapStateToProps=状态=>({
navigationReducer:state.navigationReducer，
});
导出默认连接（MapStateTops）（AppWithNavigationState）；

到目前为止还不错，只是在用户登录（即从

Login

导航到

Main

）之前，不应“呈现”动态BBAR

原因如下

const Tabs=TabNavigator({
开始：{
屏幕：UserStackNavigator，
导航选项：{
tabBarIcon:（），
},
},
…Account.User.CanEnter{
条件B：{
屏幕：条件屏幕，
导航选项：{
tabBarIcon:（），
},
}} : {},
设置：{
屏幕：设置，
导航选项：{
tabBarIcon:（），
}
}
},{
…TabNavigator.Presets.AndroidTopTabs，
tabbar位置：“底部”，
选项卡选项：{
activeTintColor:“#eaeb65”，
showIcon：没错，
showLabel:false，
风格：{背景颜色：'#333'}，
}
});
导出默认类DynamicTabBar扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回；
}
}
DynamicTabBar.router=Tabs.router；

…Account.User.CanEnter？{

始终为false，因为

TabNavigator

是在用户登录之前呈现的，并且

Account

已填充。如果尝试失败，它将被删除

我想在

组件willmount

中填充

选项卡

，但无法设置静态路由器：

DynamicTabBar.router=Tabs.router；

有没有办法解决这个问题？

是的！ 我想我找到了一种方法。解决方案可能没有遵循设计模式，但这就是我想到的：

导出默认类DynamicTabBar扩展React.Component{
静态路由器=TabRouter({
开始：{
屏幕：UserStackNavigator，
导航选项：{
tabBarIcon:（），
},
},
…Account.User.CanEnter{
条件B：{
屏幕：条件屏幕，
导航选项：{
tabBarIcon:（），
},
}} : {},
设置：{
屏幕：设置，
导航选项：{
tabBarIcon:（），
}
}
},{
…TabNavigator.Presets.AndroidTopTabs，
tabbar位置：“底部”，
选项卡选项：{
activeTintColor:“#eaeb65”，
showIcon：没错，
showLabel:false，
风格：{背景颜色：'#333'}，
}
});
建造师（道具）{
超级（道具）；
}
render（）{
const tabs=TabNavigator({
开始：{
屏幕：UserStackNavigator，
导航选项：{
tabBarIcon:（），
},
},
…Account.User.CanEnter{
条件B：{
屏幕：条件屏幕，
导航选项：{
tabBarIcon:（），
},
}} : {},
设置：{
屏幕：设置，
导航选项：{
tabBarIcon:（），
}
}
},{
…TabNavigator.Presets.AndroidTopTabs，
tabbar位置：“底部”，
选项卡选项：{
activeTintColor:“#eaeb65”，
showIcon：没错，
showLabel:false，
风格：{背景颜色：'#333'}，
}
});
返回；
}
}

---

路由器以静态方式分配，并在运行时动态构建。

这是我的解决方案。我正在使用expo。我需要标签的动态数量和内容，我将从API获得这些标签

MainTabNavigator.js

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import SettingsScreen from '../screens/SettingsScreen';
import {getBrowerScreen} from '../screens/BrowserScreen';


const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),
};

// Tab params that we will get from API
var tabParams = [
  {title: 'Tab 1', url: 'https://mycar.city', icon: 'md-pricetags'},
  {title: 'Tab 2', url: 'https://mycar.city', icon: 'ios-play-circle'},
  {title: 'Tab 3', url: 'https://mycar.city', icon: 'ios-phone-portrait'},
  {title: 'Tab 4', url: 'https://global-trend.info', icon: 'ios-phone-portrait'},
],
tabs = {};

for (var i=0; i<tabParams.length; i++) {
  const tab = tabParams[i];

  tabs['Tab' + (i + 1)] = createStackNavigator({
    Links: getBrowerScreen(tab.url),
  });

  tabs['Tab' + (i + 1)].navigationOptions = {
    tabBarLabel: tab.title,
    tabBarIcon: ({ focused }) => (
      <TabBarIcon
        focused={focused}
        name={tab.icon}
      />
    ),
  };
}

//Adding another kind of tab
tabs.SettingsStack = SettingsStack;

export default createBottomTabNavigator(tabs);

从“React”导入React；
从“react native”导入{Platform}；
从“反应导航”导入{createStackNavigator，CreateBoottomTabNavigator}；
从“../components/TabBarIcon”导入TabBarIcon；
从“../screens/SettingsScreen”导入设置屏幕；
从“../screens/BrowserScreen”导入{getBrowerScreen}；
const SettingsStack=createStackNavigator({
设置：设置屏幕，
});
设置Stack.navigationOptions={
tabBarLabel:“设置”，
tabBarIcon:（{focused}）=>(
),
};
//我们将从API获取的选项卡参数
var tabParams=[
{标题：“选项卡1”，url:'https://mycar.city，图标：'md pricetags'}，
{标题：“选项卡2”，url:'https://mycar.city，图标：“ios播放圈”}，
{标题：“选项卡3”，url:'https://mycar.city，图标：“ios手机肖像”}，
{标题：“选项卡4”，url:'https://global-trend.info，图标：“ios手机肖像”}，
],
助教
import React from 'react';
import { View, StyleSheet, WebView } from 'react-native';
import { ExpoLinksView } from '@expo/samples';

export function getBrowerScreen(url) {

  return class BrowserScreen extends React.Component {
    static navigationOptions = {
      header: null,
    };

    render() {
      return (
        <View style={styles.container}>
          <WebView
            source={{ uri: url }}
            style={{ width: '100%' }}
          />
        </View>
      );
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});