次次的项目路由用的是’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设置状态栏
安卓设置图片
完结