React Native Navigator

Navigator 是react native @0.43之前自带的导航组件

1. Navigator 是什么？

• 一个导航组件
• 进入下一个界面，返回上一个界面
• 传递数据给下一个界面，返回数据给上一个界面

2. 使用

• 导入Navigator （自带组件）
• render返回Navigator
• 调用Navigator的相应方法

3. 示例：

• 两个组件间的跳转和传递数据

入口文件

// index.iso.js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator
} from 'react-native';
import Boss from './Boss';
export default class github_rn extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Navigator
          initialRoute={{
            name: 'Boss',
            component: Boss
          }}
          renderScene={(route, navigator)=>{
            let Component = route.component;
            return <Component navigator={navigator} {...route.params}/>
          }}>
        </Navigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('github_rn', () => github_rn);

说明：

• initialRoute={{component: Boss}}默认页面
• renderScene的两个参数是就是initialRoute的两个参数，render返回的是给用户的Component，将navigator作为props传递给这个component

组件Boss

// Boss.js
import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import Employee from './Employee';
export default class Boss extends Component {
  constructor() {
    super();
    this.state = {
      reply: ''
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>I am Boss</Text>
        <Text
          onPress={()=>{
            this.props.navigator.push({
              component:Employee,
              params:{
                reply:'工作进度如何？',
                onCallBack:(reply)=>{
                  this.setState({
                    reply: reply
                  })
                }
              }
            })
          }}
        >询问工作进度-></Text>
        <Text>收到Employee的回复：{this.state.reply}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})

说明：

• 从Boss组件传递过来的navigator将下一个要跳转的组件push进去，params是要传递的参数
• onCallBack自定义函数，可以接收子组件传递过来的数据

组件Employee

// Employee.js
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
export default class Employee extends Component{
  render(){
    return(
      <View style={styles.container}>
        <Text>I am Employee</Text>
        <Text>收到Boss的消息：{this.props.reply}</Text>
        <Text
          onPress={()=>{
            this.props.onCallBack('请查收邮件')
            this.props.navigator.pop()
          }}
        >回复Boss-></Text>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})

说明：

• 调用onCallBack函数，将要传递的数据传入
• navigator.pop()关闭当前路由，也就跳转到上一个路由了