Navigator（导航器）
1.相同组件之间的跳转
第一步 初始化Navigator
==> Navigator概览
<Navigator
initialRoute ={{自定义参数列表}}
renderScene={(route, navigator) => 自定义组件}
/>
==> index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
Navigator
} from 'react-native';
import MyScene from './MyScene'
class Navigators extends Component {
render() {
return (
<Navigator
//此处的title和index是自定义的变量，他们作为一个整体会作为renderScene的第一个参数route
initialRoute={{title: '初始化组件', index: 0}}
//渲染下一个界面
renderScene={(route, navigator) =>
//MyScene为自定义组件，因为它的组件已确定，所以并没有达到我们想要的结果——跳转到不同的组件。但是用来做测试足以
<MyScene
title={route.title}
//进入下个组件 ，MyScene组件的自定义属性之一
onForward={ () => {
const nextIndex = route.index + 1;
navigator.push({
//组件之间的传值可以写在这
title: '第' + nextIndex + '个组件',
index: nextIndex,
});
}}
//回到上个组件 ，MyScene组件的自定义属性之一
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
);
}
}
AppRegistry.registerComponent('Navigators', () => Navigators);
第二步 自定义组件
==> MyScene.js
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, Navigator} from 'react-native';
export default 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={{marginTop: 20, alignItems: 'center'}}>
<Text style={{fontSize: 20, fontWeight: 'bold'}}>当前组件: { this.props.title }</Text>
<TouchableOpacity onPress={this.props.onForward}>
<Text>点击进入下个组件</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.props.onBack}>
<Text>点击回到上个组件</Text>
</TouchableOpacity>
}}
</View>
)
}
}
这里的onForward和onBack有点像OC中的block
2.自定义组件之间的跳转
第一步 初始化Navigator
==> Navigator概览
<Navigator
//自定义参数列表,其中component表示要跳转到的组件
initialRoute={{component: defaultComponent}}
//route是上面的自定义参数列表，navigator表示使用的Navigator对象
renderScene={(route, navigator) => {
//声明即将要跳转到的组件
let Component = route.component;
//此处的{...route.params}对应页面跳转时push里的参数params
return <Component {...route.params} navigator={navigator} />
}}
/>
==> index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
Navigator
} from 'react-native';
import FirstPage from './FirstPage'
class Navigators extends React.Component {
render() {
let defaultComponent = FirstPage;
return (
<Navigator
initialRoute={{component: defaultComponent}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
/>
);
}
}
AppRegistry.registerComponent('Navigators', () => Navigators);
第二步 自定义组件
==> FirstPage.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import SecondPage from './SecondPage'
export default class FirstPage extends React.Component {
render() {
return (
<View style={{marginTop: 20}}>
<TouchableOpacity
onPress = {this._pressButton.bind(this)}
>
<Text>点击我进入第二个页面</Text>
</TouchableOpacity>
</View>
)
}
_pressButton() {
const { navigator } = this.props;
if (navigator) {
navigator.push({
component: SecondPage,
params:{
title:'FirstPage'
}
})
}
}
}
注意：在render中的return中如果要调用本组件中的自定义方法，需要绑定。如
onPress = {this._pressButton.bind(this)}
至此，在自定义组件中如果要跳转到其他的界面，可以使用push/pop方法。
==> SecondPage.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
export default class SecondPage extends React.Component {
constructor(props) {
super(props);
this.state = {
title: null
}
}
componentDidMount() {
//这里获取从FirstPageComponent传递过来的参数:
this.setState({
title: this.props.title
});
}
render() {
console.log(this.state.title);
return (
<View style={{marginTop: 20, backgroundColor: 'yellow'}}>
<Text>测试页面:{this.props.title}</Text>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点击我回到上一页面</Text>
</TouchableOpacity>
</View>
)
}
_pressButton() {
const {navigator} = this.props;
if (navigator) {
navigator.pop();
}
}
}
