什么是Navigator
- 它是一个导航组件，
- 用于进入下一个界面，返回上一个界面，
- 并且传递数据给下一个界面，返回数据给上一个界面。
如何使用Navigator
- 导入Navigator，由于Navigator是ReactNative官方所支持的组件，所以不需要安装。
- 在render中返回Navigator
- 调用Navigator的相应方法
PageJump.js
import React,{Component} from 'react';
import {View,StyleSheet} from 'react-native';
import {Navigator } from 'react-native-deprecated-custom-components';
import PageJump1 from './PageJump1'
export default class PageJump extends Component{
render(){
return (
<View style={styles.container}>
<Navigator
initialRoute={{
component:PageJump1
}}
//renderScene:每个页面被渲染的时候都会回调这个renderScene方法
// 回调renderScene后会传进来连个参数：route(路由)和navigator
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component navigator={navigator}{...route.params}/>
}}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#F5FCFF',
}
})
PageJump1.js
import React,{Component} from 'react';
import {Text, View,StyleSheet,Button } from 'react-native';
import PageJump2 from './PageJump2';
export default class PageJump1 extends Component{
constructor(props){
super(props)
this.state={
word:''
}
}
render(){
return (
<View style={styles.container}>
<Text style={styles.text}>我是第一个页面 </Text>
<Button title="跳转到第二个页面"
onPress={()=>{
this.props.navigator.push({
component:PageJump2,
params:{
word:'PageJump1的数据',
onCallBack:(word)=>{
this.setState({
word:word
})
}
}
})
}}/>
<Text style={styles.text}>{this.state.word}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'red',
},
text:{
fontSize:20
}
})
PageJump2.js
import React,{Component} from 'react';
import {Text, View,StyleSheet,Button } from 'react-native';
export default class PageJump2 extends Component{
constructor(props){
super(props)
this.state={
}
}
render(){
return (
<View style={styles.container}>
<Text style={styles.text}> 我是第二个页面</Text>
<Text style={styles.text}> 收到了：{this.props.word}</Text>
<Button
title='回退'
onPress={()=>{
this.props.onCallBack('PageJump2的数据')
this.props.navigator.pop()
}}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'green',
justifyContent:'center'
},
text:{
fontSize:20
}
})
