请问老师如何动态的生成createBottomTabNavigator

Question

我起始页是createStackNavigator 里面包含了createBottomTabNavigator ，现在我要根据后台接口返回的数据去动态的生成createBottomTabNavigator  也就是底部导航的Tab选项，请教下老师如何动态渲染生成，谢谢。

Answer 1

CrazyCodeBoy 2018-07-12 10:52:40

关于如何实现react-navigation的动态tab，react-navigation的官库上大概有100多个issuse是关于这个的https://github.com/react-navigation/react-navigation/issues?utf8=%E2%9C%93&q=dynamic+tab

但上面的方案都不尽人意，接下来说下我的方案哈：

要实现动态Tab的功能，我们可以实现一个DynamicTabNavigator：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120

import {BottomTabBar, createBottomTabNavigator} from 'react-navigation-tabs';   const TABS = {//在这里配置页面的路由     Page1: {         screen: Page1,         navigationOptions: {             tabBarLabel: 'Page10',             tabBarIcon: ({tintColor, focused}) => (                 <Ionicons                     name={focused ? 'ios-home' : 'ios-home-outline'}                     size={26}                     style={{color: tintColor}}                 />             ),         }     },     Page2: {         screen: Page2,         navigationOptions: {             tabBarLabel: 'Page2',             tabBarIcon: ({tintColor, focused}) => (                 <Ionicons                     name={focused ? 'ios-people' : 'ios-people-outline'}                     size={26}                     style={{color: tintColor}}                 />             ),         }     },     Page3: {         screen: Page3,         navigationOptions: {             tabBarLabel: 'Page3',             tabBarIcon: ({tintColor, focused}) => (                 <Ionicons                     name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}                     size={26}                     style={{color: tintColor}}                 />             ),         }     }, };   export default class DynamicTabNavigator extends React.Component {     constructor(props) {         super(props);         console.disableYellowBox = true;     }       /**      * 获取动态的Tab      * @returns {*}      * @private      */     _tabNavigator() {         let tabs = {};         if (this.props.navigation.state.params.tabs) {             /**              * 取出上一个页面传过来的要显示的tab参数，也可以是从服务端下发的的Tab的配置，              * 比如显示createBottomTabNavigator中的那些Tab,              * 这个配置页可以是在其他页面获取之后通过AsyncStorage写入到本地缓存，              * 然后在这里读取缓存，也可以通过其他方式如props、global config等获取              ***/             this.props.navigation.state.params.tabs.forEach(e => {//根据需要定制要显示的tab                 tabs[e] = TABS[e];             })           } else {             const {Page1, Page2} = TABS;//根据需要定制要显示的tab             tabs = {Page1, Page2};             Page1.navigationOptions.tabBarLabel = 'P1';//动态修改Tab的属性         }         return createBottomTabNavigator(tabs, {//应用修改后的tab             tabBarComponent: TabBarComponent,             tabBarOptions: {                 activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',             }         });     }       render() {         const Tabs = this._tabNavigator();         return (             <Tabs/>         );     } }   class TabBarComponent extends React.Component {     constructor(props) {         super(props);         this.theme = {             tintColor: props.activeTintColor,             updateTime: new Date().getTime()         }     }       render() {         const {routes, index} = this.props.navigation.state;         if (routes[index].params) {             const {theme} = routes[index].params;             if (theme && theme.updateTime > this.theme.updateTime) {                 this.theme = theme;             }         }           /**          * custom tabBarComponent          * https://github.com/react-navigation/react-navigation/issues/4297          */         return (             <BottomTabBar                 {...this.props}                 activeTintColor={this.theme.tintColor || this.props.activeTintColor}             />         );     }   }

然后，在createStackNavigator中使用这个DynamicTabNavigator：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

export const AppStackNavigator = createStackNavigator({     HomePage: {         screen: HomePage     },    ...     TabNav: {         screen: DynamicTabNavigator,         navigationOptions: {//在这里定义每个页面的导航属性，静态配置             title: "This is TabNavigator.",         }     } }, {     navigationOptions: {         // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar     } });

• 提问者 龙晓秀 #1

  非常感谢老师 谢谢

Answer 2

提问者 龙晓秀 2018-07-13 10:29:57

还有一种思路就是 在页面中自定一个react-native-scrollable-tab-view，然后根据后台的数据去动态渲染bottomBar 具体过程在下面链接中，有需要的同学可以参考下:

https://www.jianshu.com/p/b0cfe7f11ee7