react native 的 Navigator

首先安装 Navigator

 npm i -S react-native-deprecated-custom-components

引入Navigator

import {Navigator} from 'react-native-deprecated-custom-components'

再次说一遍报错 就把node_module删了重新 装 ，我严重怀疑是不是 要每次装新包的时候都删除一遍/～～/

要实现一个页面到另外页面的跳转

主代码

import {Navigator} from 'react-native-deprecated-custom-components'
import Boy from './Boy'
<Navigator
            initialRoute = {{component:Boy}}
            renderScene ={(route,navigator)=>{
            let Component = route.component
            return <Component navigator={navigator} {...route.params} />
          }}
        >

        </Navigator>

组件1代码

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'm a boy</Text>
        <Text style={styles.text}
        onPress={()=>{
          this.props.navigator.push({
            component:Girl,
            params:{
                word:'一朵玫瑰',
                onCallBack:(word)=>{
                  this.setState({word:word});
                }
            }
          })
        }}
        > 送给女孩一支玫瑰</Text>
        <Text style={styles.text}>{this.state.word}</Text>
      </View>)
    }
  }
  /*
  * this.props.navigator.push({
            component:Girl,
            params:{
                word:'一朵玫瑰',
                onCallBack:(word)=>{
                  this.setState({word:word});
                }
            }
          })
  *  navigator 会从上级传递过来 作为props 的属性存在
  *  push方法  转到 那个组件 （参数1：component，参数2：params 传到下个页面的参数）
  *  pop方法 关闭当前页面
  *
  * */
  const styles =  StyleSheet.create({
     container:{
       flex:1,
       backgroundColor:'gray',
       justifyContent:'center',
     },
    text:{
        fontSize:20,
  
    }
  })

组件代码2

import React,{Component} from 'react';
import {View, Text,StyleSheet} from 'react-native';
import Boy from './Boy';

export default class Girl extends Component{
  constructor(props){
    super(props);
    this.state={

    }
  }
  render(){
    return(
        <View style={styles.container}>
          <Text style={styles.text}>
            I'm 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:'pink',
    justifyContent:'center',
  },
  text:{
    fontSize:20,
  }
})