React native a custom navigation bar

Before we learned about the use of touchable components and page navigation:
From the zero-learning react native 09 touchable components
...
From the zero-learning React native 03 page navigation
...

After the study, we can complete a custom navigation bar, the effect is as follows:

We need to create a NaviBar.js navigation bar to display the top, and four more interfaces ( Page1.js,Page2.js,Page3.js,Page4.js ). Of course, there is also a need to modify index.android.js or index.ios.js to handle 4 interface switches.

Navigation bar Navibar Implementation

Here we assume that the application has 4 columns, and the aspect ratio of each button is 4:3
Directly post code:

ImportReact, {Component} from' react ';Import{appregistry, StyleSheet, View, Text, Touchablehighlight,} from' react-native ';varDimensions = require ("Dimensions");varTotalWidth = Dimensions.get (' window '). Width;//Screen widthLet navibuttonwidth = totalWidth/4;//Calculate navigation bar per widthLet Navibuttonheight = Navibuttonwidth *0.75;//nav bar per heightExportdefault  class navibar extends Component {    //ConstructionConstructor (props) {Super(props); This. _tab0pressed = This. _tab0pressed.bind ( This); This. _tab1pressed = This. _tab1pressed.bind ( This); This. _tab2pressed = This. _tab2pressed.bind ( This); This. _tab3pressed = This. _tab3pressed.bind ( This); }//Four buttons are pressed when processing function_tab0pressed () { This. props.onnavibarpress (0); } _tab1pressed () { This. props.onnavibarpress (1); } _tab2pressed () { This. props.onnavibarpress (2); } _tab3pressed () { This. props.onnavibarpress (3); } render () {//through attributes which navigation button is the current navigation page, this navigation with a gray background        //Use the map function of the JavaScript array to generate another array from an array buttoncolors        //Do not understand the function, look at the following explanation        varButtoncolors = This. Props.naviBarStatus.map (function (anumber) {if(Anumber = =0)return ' White ';return ' Gray '; });return(//Root View<view style={styles.navirow}> <touchablehighlight onpress={ This._tab0pressed}> <view style={[styles.button,{backgroundcolor:buttoncolors[0]}]}> <text style={styles.textstyle1}> Entry One </Text> </View> </TouchableHighlight> <touchableh Ighlight onpress={ This._tab1pressed}> <view style={[styles.button,{backgroundcolor:buttoncolors[1]}]}> <text style={styles.textstyle1}> Entry II </Text> </View> </TouchableHighlight> <touchableh Ighlight onpress={ This._tab2pressed}> <view style={[styles.button,{backgroundcolor:buttoncolors[2]}]}> <text style={styles.textstyle1}> Entry III </Text> </View> </TouchableHighlight> <touchableh Ighlight onpress={ This._tab3pressed}> <view style={[styles.button,{backgroundcolor:buttoncolors[3]}]}> <text style={styles.textstyle1}> Entry IV        </Text> </View> </TouchableHighlight> </View>    ); }}//Declare attributes to make it easy to use the current componentNavibar.proptypes = {naviBarStatus:React.PropTypes.arrayOf (React.PropTypes.number). IsRequired, Onnavibarpress:rea Ct. PropTypes.func.isRequired};//StyleConst STYLES = stylesheet.create ({navirow: {flexdirection:' Row '}, Button: {width:navibuttonwidth, height:navibuttonheight, justifycontent:' Center '}, TextStyle1: {fontSize: -, TextAlign:' Center '}});

It uses the map function,
the function of the map function is to "map" a new array from the original array according to a relationship . Here's an example of squared:

var data= [1,2,3,4];var newArray=data.map((item)=>{return item*item});console.log(newArray);  //输出[1,4,9,16]

Unified processing of four interface switching

We need to index.android.js or index.ios.js This code is relatively simple, only need to import four interface, with the Navigator component to switch on it.

ImportReact, {Component} from' react ';Import{appregistry, StyleSheet, Navigator} from' react-native ';ImportPage1 from'./page1 ';ImportPage2 from'./page2 ';ImportPage3 from'./page3 ';ImportPage4 from'./page4 '; class awesomeproject extends Component {    //Tell navigator the effect when the module is switchedConfigurescene () {returnNavigator.SceneConfigs.FadeAndroid; }//Switch the processing interface according to the information passedRenderscene (router, navigator) { This. _navigator = navigator; Switch (router.name) { Case ' Page1 ':return<page1 navigator={navigator}/>; Case ' Page2 ':return<page2 navigator={navigator}/>; Case ' Page3 ':return<page3 navigator={navigator}/>; Case ' Page4 ':return<page4 navigator={navigator}/>; }} render () {return(//Root View<navigator Initialroute={{name:' Page1 '}} configurescene={ This. Configurescene} renderscene={ This.renderscene}/>); }}appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

Interface

The above code needs to introduce PAGE1-PAGE4, the four interface is very similar, we only paste one of them.
Page1.js

ImportReact, {Component} from' react ';Import{View, StyleSheet,} from' react-native ';ImportNavibar from'./navibar '; exportdefault  class Page1 extends Component {    //ConstructionConstructor (props) {Super(props);//Initial state         This. onnavibarpress = This. Onnavibarpress.bind ( This); } render () {//Different page, need to modify the following array, through the array control navigation bar entry display State        varNavistatus = [1,0,0,0];return(<view style={styles.container}> <navibar Navibarstatus={navistatus} onnavibarpress={ This.onnavibarpress}/> <view style={styles.whatleft}/> </View>); }//Different page needs to modify the return valueOnnavibarpress (anumber) {switch (anumber) { Case 0:return; Case 1://switch via replace                 This. Props.navigator.replace ({name:' Page2 '});return; Case 2: This. Props.navigator.replace ({name:' Page3 '});return; Case 3: This. Props.navigator.replace ({name:' Page4 '});return; }}}const styles = Stylesheet.create ({container: {flex:1}, Whatleft: {//component defines a top borderFlex:1, borderTopWidth:1, BorderColor:' Black ', BackgroundColor:' Red ' //The background color of each interface is different}});

By the way point two: When the root view does not specify a background color, the default value is a gray; The background color of the parent view is inherited when the child view does not specify a back colour.

More exciting please pay attention to public account Likedev, public account name: Love Android.

React native a custom navigation bar