使用 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>

.