React Native 学习笔记(二)

React Native NavigatorIOS API 使用

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

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

路由

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

1
2
3
4
5
6
7
8
9
10
11
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyView,
title: 'My View Title',
passProps: { myProp: 'foo' },
}}
/>
);
}

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

initialRoute 两个必须属性 :component title

initialRoute的完整属性定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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渲染的任何组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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') 未定义对象错误。

1
2
3
4
5
6
7
8
9
10
11
12
class MyView extends Component {
_handleNavigationRequest () {
this.refs.nav.push();
}
render(){
<NavigatorIOS ref='nav' initialRoute={ component: FirstScene,
title: 'First Scene',
rightButtonTitle: 'More',
onRightButtonPress: () => this._handleNavigationRequest()} />
}
}

Demo介绍

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

其中index.ios.js里进行了NavigatorIOS的组件渲染,在导航栏右边有一个More按钮,点击可以Push SecondScene.js
页面。
NavigatorIOSinitialRoute里的componetFirstScene(第一个Route组件对象,相当于iOSUINavigationControllerrootViewCotroller)。title:'First Scene'。(title可以随意字符串)。
()。
FirstScene里面有一个按钮,点击也可以Push SecondScene.js 页面。使用NavigatorIOS的主要原因是可以让原生UINavigationController
一样可以使用左划功能来返回到上一界面
Demo地址:
https://github.com/MsgIM/MsgIMNavi.git