React-native的路由使用

次次的项目路由用的是’react-native-router-flux’

首先还是npm install react-native-router-flux --save

安装好之后再我们的入口文件中 或者单独定义js随个人爱好

引入如上：在定义两个js文件home/home.js/login.js

//导入Action的包,处理页面跳转home.js
import { Actions } from ‘react-native-router-flux’;
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
export default class Home extends Component {
render(){
return (

<Text onPress={()=>Actions.login()}>
我是home


);
}
};

//导入Action的包,处理页面跳转login.js
import { Actions } from ‘react-native-router-flux’;
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
export default class Login extends Component {
render(){
return (

<Text onPress={()=>Actions.home()}>
我是login


);
}
};
实际效果

可以切换了。传参也很简单

//导入Action的包,处理页面跳转
import { Actions } from ‘react-native-router-flux’;
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
export default class Login extends Component {
render(){
let admin =‘1111’
return (

<Text onPress={()=>Actions.home({admin})}> //这里是传的参数
我是login


);
}
};

//导入Action的包,处理页面跳转
import { Actions } from ‘react-native-router-flux’;
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
export default class Home extends Component {
render(){
return (

<Text onPress={()=>Actions.login()}>
我是home + {this.props.admin} //这里是接受


);
}
};

效果

ios设置状态栏

安卓设置图片

完结