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两个必须属性 ：componenttitle
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）并加上原帖地址。
网友评论