使用 react-native-tab-navigator 创建 TabBar 组件

1、首先安装好ReactNative的运行环境，安装组件依赖库

使用npm install react-native-tab-navigator --save安装所依赖的第三方库

2、导入

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

3、使用

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="业务服务"
    selectedTitleStyle={{color:"#007aff"}}//设置tab标题颜色
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/fw1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/fw2.png')} />}//设置图标选中颜色
    // badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    <View style={styles.pages1}>
      <Text>这是首页</Text>
    </View>
  </TabNavigator.Item>

  <TabNavigator.Item
    selected={this.state.selectedTab === 'shebei'}
    title="设备列表"
    selectedTitleStyle={{color:"#007aff"}}
    badgeText="1"
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/lb1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/lb2.png')} />}
    // renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'shebei' })}>
    <View style={styles.pages2}>
      <Text>设备列表</Text>
    </View>
  </TabNavigator.Item>

  <TabNavigator.Item
    selected={this.state.selectedTab === 'hetong'}
    title="合同管理"
    selectedTitleStyle={{color:"#007aff"}}
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/ht1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/ht2.png')} />}
    // renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'hetong' })}>
    <View style={styles.pages3}>
      <Text>合同管理</Text>
    </View>
  </TabNavigator.Item>

  <TabNavigator.Item
    selected={this.state.selectedTab === 'qiye'}
    title="企业信息"
    selectedTitleStyle={{color:"#007aff"}}
    renderIcon={() => <Image style={styles.icon} source={require('./res/image/qy1.png')} />}
    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#007aff'}]} source={require('./res/image/qy2.png')} />}
    // renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'qiye' })}>
    <View style={styles.pages4}>
      <Text>个人中心</Text>
    </View>
  </TabNavigator.Item>
</TabNavigator>

.