前言
此文完全参考React-Native中文社区的博客新手理解navigator的教程而来,建议直接跳转链接进行详细学习,为防止链接失效或不可抗力因素无法访问,个人整理简单记录如下.
开始
由于前一篇文章将代码进行了分层整理,所以我们的index.android.js已经变得相对简洁
index.android.js
'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 />标签
第七行:initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
第八，九，十行: 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
最后的几行:
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
'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
'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>
)
}
}
