react-native bottom navigation bar to achieve

1. react-native-tab-navigator achieve:

　　　　bottom.js code is as follows:

　　　　

import React, {Component} from 'react';
import {StyleSheet, View,Text,Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
 
export default class Bottom extends Component { / * Initialize state * /
  constructor(props){
      super(); = this.state {selectedTab: 'tb_msg' ,}} / ** * * @param selectedTab method common component selected tab * @param title * @param icon * @param selectedIcon * @param imageStyle rendered color when selected icon * @param mark subscript * @param viewContent page content @Returns {*} * * / tabNavigatorItems (selectedTab, title, icon, selectedIcon, imageStyle, Mark, viewContent) {return (< TabNavigator.Item Selected = {this.state.selectedTab === selectedTab title} = {title = {} renderIcon () => <Image Source style = {} = {styles.myImage icon} />} = {renderSelectedIcon () => <Image style = {[styles.myImage , {the tintColor: imageStyle}]} Source selectedIcon} = {/> badgeText} = {} the onPress = {Mark () => this.setState ({selectedTab: selectedTab})}> <View Flex style = {{:}. 1 }> <Text> {viewContent} </ Text> </View> </TabNavigator.Item> )} The render () {return (<View style = {} styles.container> <the TabNavigator> {this.tabNavigatorItems ( 'tb_msg', "message", require ( '../../ assets / img / zhuye.png '), require ( "../../ assets / img / zhuyesl.png"),' # 622193 ', "", " message page content" )} {this.tabNavigatorItems (' tb_contacts', "contacts" , require ( '../../ assets / img / zhuye.png'), require ( "../../ assets / img / zhuye.png"), '# 65bb74', "", " contacts page content " )} {this.tabNavigatorItems ( 'tb_watch'," Aspect ", require ( '../../ assets / img / zhuye.png'), require (" ../../ assets / img /zhuye.png"),'#6ebef3 ', "", "Aspect page content" )} {this.tabNavigatorItems (' tb_dynamic ', "dynamic", require (' ../../ assets / img / zhuye .png'),require("../../assets/img/zhuye.png"),'#622193',"","动态页面内容")} </TabNavigator> </View>  ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, myImage:{ width:22, height:22, } });

        Run: react-native run-android

     

 

 

 　operation result: