React Native学习笔记(七)-页面跳转、传值、回传

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()方法可以控制栈的进出。

使用示例

1. 在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);
   

2. 在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进行页面的跳转并传递了参数。

3. 在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();
        }
    }
  

好了到这里关于页面的跳转、传值、回传已经讲解完毕。