文章目录
  1. 前言
  2. 开始

RN(react native)入坑指南-07,使用navigator实现页面跳转

前言

  此文完全参考React-Native中文社区的博客新手理解navigator的教程而来,建议直接跳转链接进行详细学习,为防止链接失效或不可抗力因素无法访问,个人整理简单记录如下.

开始

由于前一篇文章将代码进行了分层整理,所以我们的index.android.js已经变得相对简洁

index.android.js

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
'use strict';

import React,{Navigator,AppRegistry} from 'react-native';

{/**引入Login组件 */}
import Login from './src/login/Login.js';

class TaraRn extends React.Component {

render() {
{/** 默认组件名称以及默认组件 */}
let defaultName = "Login";
let defaultComponent = Login;

return (
<Navigator
//初始化组件
initialRoute={{ name: defaultName, component: defaultComponent }}
//页面切换效果
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
)
}
}

AppRegistry.registerComponent('TaraRn', () => TaraRn);

这里来解释一下代码:

第三行: 一个初始首页的component名字,比如我写了一个component叫HomeComponent,那么这个name就是这个组件的名字【HomeComponent】了。

第四行: 这个组件的Class,用来一会儿实例化成 <Component />标签

第七行:

1
initialRoute={{ name: defaultName, component: defaultComponent }}

这个指定了默认的页面,也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。

第八,九,十行:

1
configureScene={() => {return Navigator.SceneConfigs.VerticalDownSwipeJump;}}

这个是页面之间跳转时候的动画,具体有哪些?

  • 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

最后的几行:

1
2
3
4
5
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

这里是每个人最疑惑的,我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货,navigator是一个Navigator的对象,为什么呢,因为它有push pop jump…等方法,这是我们等下用来跳转页面用的那个navigator对象。
return <Component {...route.params} navigator={navigator} />
这里有一个判断,也就是如果传递进来的component存在,那我们就是返回一个这个component,结合前面 initialRoute 的参数,我们就是知道,这是一个会被render出来给用户看到的component,然后navigator作为props传递给了这个component。

  • getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
  • jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
  • jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
  • jumpTo(route) - 跳转到已有的场景并且不卸载。
  • push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
  • pop() - 跳转回去并且卸载掉当前场景
  • replace(route) - 用一个新的路由替换掉当前场景
  • replaceAtIndex(route, index) - 替换掉指定序列的路由场景
  • replacePrevious(route) - 替换掉之前的场景
  • immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
  • popToRoute(route) - pop到路由指定的场景,其他的场景将会卸载。
  • popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。

Login.js

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
'use strict';

{/**引入样式文件 */}
import styles from './Login.style.js';
{/**引入图标字体 */}
import Icon from 'react-native-vector-icons/FontAwesome';
{/**引入Homepage */}
import Home from '../home/Home.js';

import React, {
Component,
TouchableHighlight,
Text,
} from 'react-native';

export default class Login extends Component {

constructor(props){
super(props);
this.state = {
name : null
}
}

_onLogin(){
// 进行跳转并传递参数
this.props.navigator.push({
title : 'homepage',
component:Home,
params : {
name : 'Tom'
}
})
}


render() {
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.th}
underlayColor="rgb(210, 230, 255)"
onPress = {this._onLogin.bind(this)}>
<View>
<Text>登录</Text>
</View>
</TouchableHighlight>
</View>
);
}

Home.js

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
'use strict'

import React,{
Component,
TouchableOpacity,
View,
Text
} from 'react-native'

import styles from './Home.style.js';

export default class Home extends Component{
constructor(props){
super(props);
this.state = {
name : 'Frank'
};
}
/**接收传递过来的参数 */
componentDidMount(){
this.setState({
name : this.props.name
})
}
/**返回事件 */
_onBack(){
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
}

render(){
return (
<View style={styles.container}>
<Text>Hello.{this.state.name}</Text>
<TouchableOpacity style={styles.th} onPress={this._onBack.bind(this)}>
<Text>点我返回</Text>
</TouchableOpacity>
</View>
)
}
}
支持一下
您得支持,是我前进的动力.