React Native 学习笔记（二）

React Native NavigatorIOS API 使用

通过学习React Native的NavigatorIOS发现官方写的Demo不便于新手学习，现把自己学习过程遇到的坑记录并分享出来。

NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。

路由

React Navtie通过路由：一个路由是用于描述导航器中一页的对象。NavigatorIOS的第一个路由通过initialRoute属性来提供。

render() {
  return (
    <NavigatorIOS
      initialRoute={{
        component: MyView,
        title: 'My View Title',
        passProps: { myProp: 'foo' },
      }}
    />
  );
}

现在MyView会被导航器渲染出来。它可以通过route属性获得对应的路由对象，导航器本身，还有所有passProps中传递的属性。

initialRoute 两个必须属性 ：component title

initialRoute的完整属性定义：

initialRoute: PropTypes.shape({
      /**
       * The React Class to render for this route
       */
      component: PropTypes.func.isRequired,

      /**
       * The title displayed in the navigation bar and the back button for this
       * route.
       */
      title: PropTypes.string.isRequired,

      /**
       * If set, a title image will appear instead of the text title.
       */
      titleImage: Image.propTypes.source,

      /**
       * Use this to specify additional props to pass to the rendered
       * component. `NavigatorIOS` will automatically pass in `route` and
       * `navigator` props to the comoponent.
       */
      passProps: PropTypes.object,

      /**
       * If set, the left navigation button image will be displayed using this
       * source. Note that this doesn't apply to the header of the current
       * view, but to those views that are subsequently pushed.
       */
      backButtonIcon: Image.propTypes.source,

      /**
       * If set, the left navigation button text will be set to this. Note that
       * this doesn't apply to the left button of the current view, but to
       * those views that are subsequently pushed
       */
      backButtonTitle: PropTypes.string,

      /**
       * If set, the left navigation button image will be displayed using
       * this source.
       */
      leftButtonIcon: Image.propTypes.source,

      /**
       * If set, the left navigation button will display this text.
       */
      leftButtonTitle: PropTypes.string,

      /**
       * This function will be invoked when the left navigation bar item is
       * pressed.
       */
      onLeftButtonPress: PropTypes.func,

      /**
       * If set, the right navigation button image will be displayed using
       * this source.
       */
      rightButtonIcon: Image.propTypes.source,

      /**
       * If set, the right navigation button will display this text.
       */
      rightButtonTitle: PropTypes.string,

      /**
       * This function will be invoked when the right navigation bar item is
       * pressed.
       */
      onRightButtonPress: PropTypes.func,

      /**
       * Styles for the navigation item containing the component.
       */
      wrapperStyle: View.propTypes.style,

      /**
       * Boolean value that indicates whether the navigation bar is hidden.
       */
      navigationBarHidden: PropTypes.bool,

      /**
       * Boolean value that indicates whether to hide the 1px hairline
       * shadow.
       */
      shadowHidden: PropTypes.bool,

      /**
       * The color used for the buttons in the navigation bar.
       */
      tintColor: PropTypes.string,

      /**
       * The background color of the navigation bar.
       */
      barTintColor: PropTypes.string,

       /**
       * The text color of the navigation bar title.
       */
      titleTextColor: PropTypes.string,

       /**
       * Bboolean value that indicates whether the navigation bar is
       * translucent.
       */
      translucent: PropTypes.bool,

    }).isRequired,

导航器

导航器是一个object，包含了一系列导航函数，可供视图调用。它会作为props传递给NavigatorIOS渲染的任何组件。

 
 class MyView extends Component {
 
    _handleBackPress() {
      this.props.navigator.pop();
    }
    
    _handleNextPress(nextRoute) {
      this.props.navigator.push(nextRoute);
    }
 
    render() {
      const nextRoute = {
        component: MyView,
        title: 'Bar That',
        passProps: { myProp: 'bar' }
      };
      
      return(
        <TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
          <Text style={{marginTop: 200, alignSelf: 'center'}}>
            See you on the other nav {this.props.myProp}!
          </Text>
        </TouchableHighlight>
      );
    }
  }
  

导航器对象包含如下的函数：

• push(route) - 导航器跳转到一个新的路由。
• pop() - 回到上一页。
• popN(n) - 回到N页之前。当N=1的时候，效果和pop()一样。
• replace(route) - 替换当前页的路由，并立即加载新路由的视图。
• replacePrevious(route) - 替换上一页的路由/视图。
• replacePreviousAndPop(route) - 替换上一页的路由/视图并且立刻切换回上一页。
• resetTo(route) - 替换最顶级的路由并且回到它。
• popToRoute(route) - 回到某个指定的路由。
• popToTop() - 回到最顶层的路由。

Ref 引用方式获取NavigatorIOS的导航函数

导航函数也可以从NavigatorIOS的子组件中获得：
从子组件中获得导航函数一定要注意，只能通过Ref引用方式。
否则使用this.props.navigator.push() 会未定义对象错误

undefined is not an object(evaluationg 'this.props.navigator.push')

具体使用方式

import React, { Component, PropTypes } from 'react';
import  {    
            AppRegistry,    
            StyleSheet,    
            Text,    
            View,    
            NavigatorIOS,    
            TouchableHighlight,
        }  from 'react-native';

import FirstScene from './FirstScene';
import SecondScene from './SecondScene';

class MsgIMNavi extends Component{    
     onFirstRightButtonPress(){               
     this.refs.navi.push({            
            title: 'Push View',            
        component: SecondScene,            
        passProps: { myProp : 'Pass Value Here' },            
     barTintColor: '#996699'       
     });    
  }    
 render() {                
     return (            
         <NavigatorIOS ref = 'navi'                                                 
                           initialRoute = {{                              
                                     component: FirstScene,                             
                                         title: 'First Scene',                              
                              rightButtonTitle: 'More',                              
                            onRightButtonPress: () => this.onFirstRightButtonPress(),                              
                                   barTintColor: '#ffffcc',                          
                  }}>            
           </NavigatorIOS>       
     );   
  }
}

Demo介绍

Demo有三个文件，分别是index.ios.js FirstScene.js SecondScene.js

• 其中index.ios.js里进行了NavigatorIOS的组件渲染，在导航栏右边有一个More按钮，点击可以Push到 SecondScene.js页面。

NavigatorIOS的initialRoute里的componet：FirstScene（第一个Route组件对象,相当于iOS中UINavigationController的rootViewCotroller）。title:'First Scene'。（title可以随意字符串）。

• FirstScene里面有一个Push Me按钮，点击可以Push到SecondScene.js 页面。使用NavigatorIOS的主要原因是可以让原生UINavigationController一样可以使用左划功能来返回到上一界面。

• SecondScece.js里面显示从上一个页面传过来的值使用this.props.myProp方式来取得。myProp是initialRoute属性 passProps中填写的Key。

本帖是作者原创，转载请署名（MsgIM）并加上原帖地址。

• Demo地址：
  https://github.com/MsgIM/MsgIMNavi.git