React Native TabNavigator导航

APP中底部中常用的nav导航，可以使用react-native-tab-navigator

安装：

yarn add react-native-tab-navigator

引入：

import TabNavigator from 'react-native-tab-navigator';

配置说明：

• selectedTab记录选中状态
• selectedTitleStyle选中文字的样式
• renderSelectedIcon图标的颜色，颜色属性为tintColor
• badgeText图标上显式的数字

代码示例：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
export default class github extends Component {
  constructor() {
    super();
    this.state = {
      selectedTab: 'tb_popular'
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'tb_popular'}
            title="最热"
            selectedTitleStyle={{color:'red'}}
            renderIcon={() => <Image style={styles.img} source={require('./res/images/ic_polular.png')} />}
            renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
            badgeText="1"
            onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
            <View style={styles.page1}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'tb_trending'}
            title="趋势"
            selectedTitleStyle={{color:'yellow'}}
            renderIcon={() => <Image style={styles.img} style={styles.img} source={require('./res/images/ic_trending.png')} />}
            renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'yellow'}]} source={require('./res/images/ic_trending.png')} />}
            onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'tb_favorite'}
            title="收藏"
            selectedTitleStyle={{color:'yellow'}}
            renderIcon={() => <Image style={styles.img} style={styles.img} source={require('./res/images/ic_favorite.png')} />}
            renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'yellow'}]} source={require('./res/images/ic_favorite.png')} />}
            onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'tb_my'}
            title="我的"
            selectedTitleStyle={{color:'yellow'}}
            renderIcon={() => <Image style={styles.img} style={styles.img} source={require('./res/images/ic_my.png')} />}
            renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'yellow'}]} source={require('./res/images/ic_my.png')} />}
            onPress={() => this.setState({ selectedTab: 'tb_my' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1: {
    flex: 1,
    backgroundColor: 'red'
  },
  page2: {
    flex: 1,
    backgroundColor: 'yellow'
  },
  img:{
    width: 22,
    height: 22
  }
});

AppRegistry.registerComponent('github', () => github);