React Native页面跳转、传值、回传
Navigator --- 在React Native中的不同页面我们称之为场景(Scene)，而Navigator页面跳转、传参的介质。它通过不同的路由对象来切换不同的场景，从而进行页面的渲染。
-
初始化路由
initialRoute = { name: 'login', component: Login, };
name为页面的名字，component为导入的组件
-
设置页面的跳转方式
configureScene = (route) => { return Navigator.SceneConfigs.FloatFromRight; }; -
场景渲染
renderScene = (route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator}/> };
若是第一次调用route的值为initialRoute的路由，而当我们拿到Login(例子中的Component)的时候，就把navigator对象传递给它，这样在Login页面中就可以使用navigator对象。navitator本质是一个管理所有界面对象的栈，所以通过push()、pop()方法可以控制栈的进出。
使用示例
-
在index.ios.js中设置初始路由
import React, {Component} from 'react'; import { AppRegistry, Navigator } from 'react-native'; import Login from './lifeStyle/login/Login' export default class lifeStyle extends Component { initialRoute = { name: 'login', component: Login, }; configureScene = (route) => { return Navigator.SceneConfigs.FloatFromRight; }; //第一次调用的时候，第一个参数route就是initialRoute renderScene = (route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator}/> }; render() { return ( <Navigator initialRoute={this.initialRoute} renderScene={this.renderScene} configureScene={this.configureScene}/> ); } } AppRegistry.registerComponent('lifeStyle', () => lifeStyle); -
在Login.js页面进行页面的跳转和传参
import React, {Component} from 'react'; import { StyleSheet, View, Text, Image, ScrollView, TextInput, ToastAndroid, TouchableOpacity } from 'react-native'; import Global from '../utils/Global'; import NetUtil from '../utils/NetUtil'; import JsonUtil from '../utils/JsonUtil'; import Util from '../utils/Util'; import StorageUtil from '../utils/StorageUtil'; import LifeStyle from '../App'; import Register from '../login/Register'; import ResetPwd from '../login/ResetPwd'; import TextButton from '../component/TextButton'; import LoadingView from '../component/LoadingView'; class Login extends Component { constructor(props) { super(props); this.state = { username: '', password: '', email: '', showLoading: false } } render() { return ( <View style={styles.container}> <TextButton text={'忘记密码'} onPress={() => this._resetPwd()} color={'#FFDE00'} backgroundColor={'transparent'}/> <TextButton style={styles.register} text={'用户注册'} onPress={() => this._register()} color={'#FFDE00'} backgroundColor={'transparent'}/> </View> ) } _register = () => { this.props.navigator.push({ name: 'register', component: Register, params: { name: 'ibinbin' } }); }; _resetPwd = () => { this.props.navigator.push({ name: 'resetPwd', component: ResetPwd, }); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5' }, reset_pwd: { fontSize: 14, color: '#FFDE00', backgroundColor: 'white' }, register: { fontSize: 14, color: '#FFDE00', textAlign: 'right', } }); export default Login;我们在_register()中使用navigator进行页面的跳转并传递了参数。
-
在register.js中返回到Login.js页面
import React, {Component} from 'react'; import { StyleSheet, View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; import TextButton from "../component/TextButton"; import Global from '../utils/Global'; import NetUtil from '../utils/NetUtil'; import JsonUtil from '../utils/JsonUtil'; import Util from '../utils/Util'; import Header from '../component/Header'; class Register extends Component { constructor(props) { super(props); this.state = { username: '', password: '' }; } componentDidMount() { this.setState({ name: this.props.name }) } render() { return ( <View style={styles.container}> <TouchableOpacity> <TextButton text="注册" onPress={() => this._register()} color={'black'} backgroundColor={'#FFDE00'}/> </TouchableOpacity> </View> ) } _goBack = () => { const {navigator} = this.props; if (navigator) { navigator.pop(); } } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5' }, register: { marginTop: 20, marginLeft: 20, marginRight: 20, backgroundColor: '#FFDE00', height: 35, borderRadius: 5, justifyContent: 'center', alignItems: 'center', }, }); export default Register;在componentDidMount()我们通过this.props.name接收了从Login页面传递过来的name。并在_goBack()设置了页面的返回。
如果我们需要把值回传过去呢？？？
-
Login.js中写个回调函数
_register = () => { this.props.navigator.push({ name: 'register', component: Register, params: { name: 'ibinbin', getMyName: (myName) => { this.setState({ name: myName }) } } }); }; -
在Register.js中设置值
_goBack = () => { const {navigator} = this.props; this.props. getMyName(name); if (navigator) { navigator.pop(); } }
