关于<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 = {() => < Image style = { styles . icon } source = { renderIcon } /> }

           //选中时图标

           renderSelectedIcon = {() => < Image style = {[ 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'

  }

});