React native a custom navigation bar

Source: Internet
Author: User
Tags javascript array

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 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. (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>{return item*item});console.log(newArray);  //输出[1,4,9,16]
Unified processing of four interface switching

We need to 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 ( { 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);

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

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.