自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][2]
[2]: https://github.com/BaiPeiHe/react-native
简介
一个导航组件，用于进入下一界面，返回上一个界面；传递数据给下一界面，返回数据给上一界面。
使用
1、导入 Navigator
2、render 方法中返回 Navigator
3、调用 Navigator 的相应方法
实例
女孩向男孩送巧克力，男孩向女孩送花。
技术点
Navigator 的初始化
Navigator 页面条状（push,pop）
Navigator 传值和返回值
1、创建 Navigator，设置男孩页面为初始页面
// index.ios.js
import boy from './boy'
render() {
return (
<View style={styles.container}>
<Navigator
// 初始化路由
initialRoute={{
component:boy
}}
// 页面跳转时的设置
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component navigator={navigator}{...route.param}/>
}}></Navigator>
</View>
);
}
2、男孩页面
/**
* boy.js
*/
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
}from 'react-native';
import girl from './girl'
export default class boy extends Component{
// 构造方法
constructor(props){
super(props);
this.state={
word:''
}
}
render(){
return (
<View style={styles.container}>
<Text style={styles.text}>I am a Boy!</Text>
<Text style={styles.text}
// 点击方法
onPress={()=> {
this.props.navigator.push({
component:girl,
param:{
word:'一枝玫瑰',
// 回调方法
onCallBack:(word)=>{
this.setState({
word:word
})
}
}
})
}}>送女孩一朵玫瑰</Text>
<Text style={styles.text}>{this.state.word}</Text>
</View>
)
}
}
// 样式
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'yellow',
// 控件居中显示
justifyContent:'center'
},
text:{
fontSize:20,
}
});
3、女孩页面
/**
* girl.js
*/
import React,{Component} from 'react';
import {
View,
Text,
StyleSheet
}from 'react-native';
export default class girl extends Component{
constructor(props){
super(props);
this.state={
}
}
render(){
return(
<View style={styles.container}>
<Text style={styles.text}>I am a Girl.</Text>
<Text style={styles.text}>我收到：{this.props.word}</Text>
<Text style={styles.text}
// 点击方法
onPress={()=>{
// 回调方法
this.props.onCallBack('一盒巧克力')
// 返回页面
this.props.navigator.pop()
}}>回送巧克力</Text>
</View>
)
}
}
// 样式
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'red',
// 控件居中显示
justifyContent:'center'
},
text:{
fontSize:22
}
});
