IOS React-navite 之 Navigator
在之前我们就有使用过NavigatorOS
这里我们在使用一下Navigator。
1、创建工程
react-native init NavigatorDemo
.
进入工程目录 创建文件
touch MyScene.js
.
打开MyScene.js ，进行编辑
import React,{ component} from 'react';
import{
View,
Text,
TouchableOpacity,
TouchableHighlight,
Navigator,
}from 'react-native';
//导入控件
view：View
Text：文本
TouchableOpacity：触摸，带有动画效果
TouchableHighlight：触摸，带有动画效果，按下去默认为黑色 可通过underlayColor：设置颜色
Navigator：控制界面的route
.
.
编辑代码
export default class MyScene extends React.Component {
onForward(){
//获取导航栏对象
// const navigator = this.props.navigator;
console.log("comming...");
this.props.navigator.push({
title:'Scene',
component:MyScene,
index:2,
name:'SecondPageComponent',
})
}
onBack(){
console.log("comming...");
this.props.navigator.pop();
}
render() {
return(
<View style={{flex:1,alignItems:'center',justifyContent:'center',backgroundColor:'skyblue'}}>
<Text>Current Scene: { this.props.title }</Text>
<TouchableOpacity onPress={ this.onForward.bind(this) }>
<Text>Tap me to load the next scene</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onBack.bind(this) }>
<Text>Tap me to go back</Text>
</TouchableOpacity>
</View> );
}
}
函数：onForward()：
line 3.获取navigator对象
line 4.打印信息
line 5.使用navigator对象进行push，压栈
line 6-9.参数
函数：onBack()
line 2.打印信息
line 3.出栈，
函数render（）
line 3.定义一个View，设置属性 分别是：大小，所有控件居中，居中，背景颜色
line 4.在View上添加一个标题
line 5.在View上，标题下添加一个可以被点击的文字
line 6.同上
2、进入index.ios.js进行引用
import React from 'react';
import {
View,
Navigator,
AppRegistry,
Text,
TouchableHighlight,
} from 'react-native';
import MyScene from './MyScene';
class NavigationDemo extends React.Component {
render() {
return (
<Navigator
initialRoute={{
title: 'My Initial Scene',
name:'My inital Scene',
index: 0 ,
component:MyScene,
}}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
renderScene={(route, navigator) =>{
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
/>
);
}
}
AppRegistry.registerComponent('NavigationDemo', () => NavigationDemo);
import不解释
import MyScene from './MyScene';
导入MyScene.js文件，其中js可以省略
Navigator
line 1：initialRoute 必要参数
定义启动时加载的路由。
路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。
initialRoute默认为initialRouteStack中最后一项。
title、name、index：参数
compoent：要渲染的第一个场景
configruScene:返回一个动画效果
效果有：
Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
renderScene function [](http://reactnative.cn/docs/0.31/navigator.html#renderscene)
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
(route, navigator) => <MySceneComponent title={route.title} navigator={navigator} />
-
到这里就完成啦！！！
这个时候你看到的效果如下：
导航效果
.
.
方法二、
只需要在index.ios.js中修改为如下代码
import React from 'react';
import {
View,
Navigator,
AppRegistry,
Text,
TouchableHighlight,
} from 'react-native';
class NavigationDemo extends React.Component{
render() {
return(
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) =>
<MyScene
title={route.title}
// 推入新场景所调用的方法
onForward={() => {
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
// 返回上一个场景所调用的方法
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
);
}
}
class MyScene extends React.Component {
static propTypes = {
title: React.PropTypes.string.isRequired,
onForward:React.PropTypes.func.isRequired,
onBack: React.PropTypes.func.isRequired,
};
render() {
return (
<View style={{flex:1,backgroundColor:'yellow',marginTop:20}}>
<Text>Current Scene: { this.props.title }</Text>
<TouchableHighlight onPress={this.props.onForward}>
<Text>Tap me to load the next scene</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>Tap me to go back</Text>
</TouchableHighlight>
</View>
);
}
}
解释一下代码：
import....这个不解释了
.
class NavigationDemo extends React.Component....
在这个方法中与上述基本一致，除了
- initialRoute：中的compoent并没有写
- 另外：renderScene
这里使用了一个箭头函数
line 1.使用MyScene作为渲染场景
line 2.定义了一个title属性等于route.title
route这个东西就是initialRoute的对象，可以这么理解。 - initial：初始化
- route：对象名
- 合起来就是初始化route对象
onFroward函数
const nextIndex：定义个只能读取的常量
navigator.push压栈并带有title和index参数
onBack函数
line 1.进行判断，如果等于零就不用出栈操作了
line 2.出栈
.
class MyScene.....
line 1.propTypes定义一个静态的变量
.
其中PropTypes包括：
React.PropTypes.array 陣列
React.PropTypes.bool.isRequired Boolean 且必要。
React.PropTypes.func 函式
React.PropTypes.number 數字
React.PropTypes.object 物件
React.PropTypes.string 字串
React.PropTypes.node 任何類型的: numbers, strings, elements 或者任何這種類型的陣列
React.PropTypes.element React 元素
React.PropTypes.instanceOf(XXX)某種XXX類別的實體
React.PropTypes.oneOf(['foo', 'bar'])其中一個字串
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.array]) 其中一種格式類型
React.PropTypes.arrayOf(React.PropTypes.string) 某種類型的陣列(字串類型)
React.PropTypes.objectOf(React.PropTypes.string) 具有某種屬性類型的物件(字串類型)
React.PropTypes.shape({
color: React.PropTypes.string, f
ontSize: React.PropTypes.number
}); 是否符合指定格式的物件
React.PropTypes.any.isRequired 可以是任何格式，且必要。
> 剩下的部分和之前的类似，不做介绍了
再啰嗦一句这里使用的是
TouchableHighlight：
underlayColor:用来设置按下时的颜色
.
## 效果如下：
最后再说一句：
如果想使用navigationBar：
navigationBar node
可选参数，提供一个在场景切换的时候保持的导航栏。
###最最后：Navigator提供的方法有：
getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
resetTo(route) - 跳转到新的场景，并且重置整个路由栈
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
