iOS 导航器
- 路线
- 导航器
- Props
- 例子

iOS 导航器

iOS 导航器包装了 UIKit 导航，并且允许你添加跨应用程序的 back-swipe 功能。

路线

路线是用于描述导航器每个页面的一个对象。第一个提供给 NavigatorIOS 的路线是 initialRoute：

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

现在将由导航器呈现 MyView。它将在 route 道具，导航器及所有的 passProps 指定的道具中接受一个路线对象。

路线完整的定义请看 initialRoute propType。

导航器

Navigator 是视图能够调用的导航函数的一个对象。它作为一个道具会被传递给任何由 NavigatorIOS 呈现的组件。

1. var MyView = React.createClass({
2. _handleBackButtonPress: function() {
3. this.props.navigator.pop();
4. },
5. _handleNextButtonPress: function() {
6. this.props.navigator.push(nextRoute);
7. },
8. ...
9. });

一个导航对象包含以下功能:

push(route)——导航到一个新的路线
pop()——返回一个页面
popN(n)——一次返回 N 页。当 N=1 时，该行为相当于 pop()
replace(route)——取代当前页面的路线，并立即为新路线加载视图
replacePrevious(route)——取代前一页的路线/视图
replacePreviousAndPop(route)——取代了以前的路线/视图并转换回去
resetTo(route)——取代顶级的项目并 popToTop
popToRoute(route)——为特定的路线对象回到项目
popToTop()——回到顶级项目

导航功能在 NavigatorIOS 组件中也是可用的：

1. var MyView = React.createClass({
2. _handleNavigationRequest: function() {
3. this.refs.nav.push(otherRoute);
4. },
5. render: () => (
6. <NavigatorIOS
7. ref="nav"
8. initialRoute={...}
9. />
10. ),
11. });

Props

Edit on GitHub

initialRoute {组件：函数型，标题：字符串型，passProps：对象型，backButtonTitle：字符串型，rightButtonTitle：字符串型，onRightButtonPress：函数型，wrapperStyle：[对象型Object]}

NavigatorIOS 使用“路线”对象来识别子视图，道具，及导航栏的配置。“push”和所有其他的导航操作预计路线是这样的：

itemWrapperStyle View#style

默认的包为 navigator 中的组件设置样式。一个常见的用例是为每一页设置 backgroundColor

tintColor 字符串型

在导航栏中的按钮使用的颜色

例子

Edit on GitHub

1. 'use strict';
2. var React = require('react-native');
3. var ViewExample = require('./ViewExample');
4. var createExamplePage = require('./createExamplePage');
5. var {
6. PixelRatio,
7. ScrollView,
8. StyleSheet,
9. Text,
10. TouchableHighlight,
11. View,
12. } = React;
13. var EmptyPage = React.createClass({
14. render: function() {
15. return (
16. <View style={styles.emptyPage}>
17. <Text style={styles.emptyPageText}>
18. {this.props.text}
19. </Text>
20. </View>
21. );
22. },
23. });
24. var NavigatorIOSExample = React.createClass({
25. statics: {
26. title: '<NavigatorIOS>',
27. description: 'iOS navigation capabilities',
28. },
29. render: function() {
30. var recurseTitle = 'Recurse Navigation';
31. if (!this.props.topExampleRoute) {
32. recurseTitle += ' - more examples here';
33. }
34. return (
35. <ScrollView style={styles.list}>
36. <View style={styles.line}/>
37. <View style={styles.group}>
38. <View style={styles.row}>
39. <Text style={styles.rowNote}>
40. See &lt;UIExplorerApp&gt; for top-level usage.
41. </Text>
42. </View>
43. </View>
44. <View style={styles.line}/>
45. <View style={styles.groupSpace}/>
46. <View style={styles.line}/>
47. <View style={styles.group}>
48. {this._renderRow(recurseTitle, () => {
49. this.props.navigator.push({
50. title: NavigatorIOSExample.title,
51. component: NavigatorIOSExample,
52. backButtonTitle: 'Custom Back',
53. passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
54. });
55. })}
56. {this._renderRow('Push View Example', () => {
57. this.props.navigator.push({
58. title: 'Very Long Custom View Example Title',
59. component: createExamplePage(null, ViewExample),
60. });
61. })}
62. {this._renderRow('Custom Right Button', () => {
63. this.props.navigator.push({
64. title: NavigatorIOSExample.title,
65. component: EmptyPage,
66. rightButtonTitle: 'Cancel',
67. onRightButtonPress: () => this.props.navigator.pop(),
68. passProps: {
69. text: 'This page has a right button in the nav bar',
70. }
71. });
72. })}
73. {this._renderRow('Pop', () => {
74. this.props.navigator.pop();
75. })}
76. {this._renderRow('Pop to top', () => {
77. this.props.navigator.popToTop();
78. })}
79. {this._renderRow('Replace here', () => {
80. var prevRoute = this.props.route;
81. this.props.navigator.replace({
82. title: 'New Navigation',
83. component: EmptyPage,
84. rightButtonTitle: 'Undo',
85. onRightButtonPress: () => this.props.navigator.replace(prevRoute),
86. passProps: {
87. text: 'The component is replaced, but there is currently no ' +
88. 'way to change the right button or title of the current route',
89. }
90. });
91. })}
92. {this._renderReplacePrevious()}
93. {this._renderReplacePreviousAndPop()}
94. {this._renderPopToTopNavExample()}
95. </View>
96. <View style={styles.line}/>
97. </ScrollView>
98. );
99. },
100. _renderPopToTopNavExample: function() {
101. if (!this.props.topExampleRoute) {
102. return null;
103. }
104. return this._renderRow('Pop to top NavigatorIOSExample', () => {
105. this.props.navigator.popToRoute(this.props.topExampleRoute);
106. });
107. },
108. _renderReplacePrevious: function() {
109. if (!this.props.topExampleRoute) {
110. // this is to avoid replacing the UIExplorerList at the top of the stack
111. return null;
112. }
113. return this._renderRow('Replace previous', () => {
114. this.props.navigator.replacePrevious({
115. title: 'Replaced',
116. component: EmptyPage,
117. passProps: {
118. text: 'This is a replaced "previous" page',
119. },
120. wrapperStyle: styles.customWrapperStyle,
121. });
122. });
123. },
124. _renderReplacePreviousAndPop: function() {
125. if (!this.props.topExampleRoute) {
126. // this is to avoid replacing the UIExplorerList at the top of the stack
127. return null;
128. }
129. return this._renderRow('Replace previous and pop', () => {
130. this.props.navigator.replacePreviousAndPop({
131. title: 'Replaced and Popped',
132. component: EmptyPage,
133. passProps: {
134. text: 'This is a replaced "previous" page',
135. },
136. wrapperStyle: styles.customWrapperStyle,
137. });
138. });
139. },
140. _renderRow: function(title: string, onPress: Function) {
141. return (
142. <View>
143. <TouchableHighlight onPress={onPress}>
144. <View style={styles.row}>
145. <Text style={styles.rowText}>
146. {title}
147. </Text>
148. </View>
149. </TouchableHighlight>
150. <View style={styles.separator} />
151. </View>
152. );
153. },
154. });
155. var styles = StyleSheet.create({
156. customWrapperStyle: {
157. backgroundColor: '#bbdddd',
158. },
159. emptyPage: {
160. flex: 1,
161. paddingTop: 64,
162. },
163. emptyPageText: {
164. margin: 10,
165. },
166. list: {
167. backgroundColor: '#eeeeee',
168. marginTop: 10,
169. },
170. group: {
171. backgroundColor: 'white',
172. },
173. groupSpace: {
174. height: 15,
175. },
176. line: {
177. backgroundColor: '#bbbbbb',
178. height: 1 / PixelRatio.get(),
179. },
180. row: {
181. backgroundColor: 'white',
182. justifyContent: 'center',
183. paddingHorizontal: 15,
184. paddingVertical: 15,
185. },
186. separator: {
187. height: 1 / PixelRatio.get(),
188. backgroundColor: '#bbbbbb',
189. marginLeft: 15,
190. },
191. rowNote: {
192. fontSize: 17,
193. },
194. rowText: {
195. fontSize: 17,
196. fontWeight: '500',
197. },
198. });
199. module.exports = NavigatorIOSExample;