@H_
404_0@这是一个简单的例子,用Navigator来@R_820_
404@面,
页面之间传递参数 (
代码是ES6语法写的):
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
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} />
}} />
);
}
}
@H_
404_0@这里来解释一下
代码:
@H_
404_0@第三行: 一个初始
首页的component名字,比如我写了一个component叫HomeComponent,那么这个name就是这个组件的名字【HomeComponent】了。
@H_
404_0@第四行: 这个组件的Class,用来一会儿实例化成
<Component />
标签
@H_
404_0@第七行:
initialRoute={{ name: defaultName,component: defaultComponent }}
这个指定了默认的
页面,也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
@H_
404_0@第八,九,十行:
configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
@H_
404_0@这个是
页面之间
跳转时候的动画,具体有哪些?可以看这个目录下,有源
代码的:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
@H_
404_0@最后的几行:
renderScene={(route,navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
@H_
404_0@这里是每个人最疑惑的,我们先看到回调里的两个参数:route,navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货,navigator是一个Navigator的对象,为什么呢,因为它有push pop jump...等
方法,这是我们等下用来@R_820_
404@面用的那个navigator对象。
return <Component {...route.params} navigator={navigator} />
@H_
404_0@这里有一个判断,也就是如果传递进来的component存在,那我们就是返回一个这个component,结合前面 initialRoute 的参数,我们就是知道,这是一个会被render出来给
用户看到的component,然后navigator作为props传递给了这个component。
@H_
404_0@所以下一步,在这个FirstPageComponent里面,我们可以直接拿到这个 props.navigator:
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
//为什么这里可以取得 props.navigator?请看上文:
//<Component {...route.params} navigator={navigator} />
//这里传递了navigator作为props
if(navigator) {
navigator.push({
name: 'SecondPageComponent',component: SecondPageComponent,})
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳转</Text>
</TouchableOpacity>
</View>
);
}
}
@H_
404_0@这个里面创建了一个可以点击的区域,让我们点击可以跳到SecondPageComponent这个
页面,实现
页面的
跳转。 现在来创建SecondPageComponent,并且让它可以再跳回FirstPageComponent:
import React,{
View,Text,TouchableOpacity,} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//很熟悉吧,入栈出栈~ 把当前的页面pop掉,这里就返回到了上一个页面:FirstPageComponent了
navigator.pop();
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}
@H_
404_0@大功告成,能进能出了。