关于<TabNavigator>的item的一些用法 例如传递navigation

_renderTab(Component,selectedTab,title, renderIcon,selectedIcon,position) {

    return (

        <TabNavigator.Item

           //设置选中的位置

            selected={this.state.selectedTab=== selectedTab}

            //标题

            title={title}

           //标题样式

           titleStyle={styles.tabText}

           //选中时标题文字样式

           selectedTitleStyle={styles.selectedTabText}

           //提示消息文字

           //badgeText = '122' 默认颜色蓝色   

自定义颜色 红色   position是当前信息指数

           renderBadge={()=>position?<View style={styles.badgeView}><Text style={styles.badgeText}>{position}</Text></View>:null}   

           //图标

           renderIcon={()=> <Imagestyle={styles.icon}source={renderIcon}/>}

           //选中时图标

           renderSelectedIcon={()=> <Imagestyle={[styles.selectedIcon]}source={selectedIcon}/>}

          

            onPress={()=> this.setState({ selectedTab:selectedTab })}

            >

            //{...this.props}向Component里面传递所有的属性 包含naviagtion

            <Component {...this.props}theme={this.state.theme}homeComponent={this}/>

        </TabNavigator.Item> 

    )

}

调用实例

{this._renderTab(RiskHiddenDanger,'首页', '首页', require('../../res/images/ic_one.png'),require('../../res/images/ic_one_press.png'),123)}

const styles =StyleSheet.create({

  container: {

    flex:1

  },

  scrollViewSize : {

    height:Dimensions.get("window").height-73,

    width :Dimensions.get("window").width,

  },

  tabText: {

    fontSize:10,

    color:'black'

  },

  selectedTabText: {

    fontSize:10,

    color:'orange'

  },

  badgeText : {

    textAlign:'center' ,

    backgroundColor:'red' ,

    color:'white' ,

    borderRadius:13 ,

    height:25 ,

    width:25

  },

  icon: {

    width:22,

    height:22,

    tintColor:'black'

  },

  selectedIcon: {

    width:22,

    height:22,

    tintColor:'orange'

  },

  page0: {

    flex:1,

    backgroundColor:'red'

  },

  page1: {

    flex:1,

    backgroundColor:'blue'

  },

  page2: {

    flex:1,

    backgroundColor:'yellow'

  },

  page3: {

    flex:1,

    backgroundColor:'green'

  }

});