React Native 基础篇之Navigator页面的跳转与数据的传递

来源：互联网发布：物业管理需求什么软件编辑：程序博客网时间：2024/05/21 21:48

这里通过一个简单的例子来阐述Navigator页面的跳转与数据的传递：

查询用户信息的例子，FirstPageComponent传递id到SecondPageComponent，然后SecondPageComponent返回user信息给FirstPageComponent

            import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Navigator,  Text,  View} from 'react-native';import FirstPageComponent from "./FirstPageComponent";export default class SampleComponent extends Component {        constructor(props){      super(props);      this.state = {      };    }        render() {        let defaultName = 'FirstPageComponent';        let defaultComponent = FirstPageComponent;        return (           <Navigator              //这个指定了默认的页面，也就是启动app之后会看到界面的第一屏              initialRoute={{ name: defaultName, component: defaultComponent }}              //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，              //有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js              configureScene={(route) => {                return Navigator.SceneConfigs.VerticalDownSwipeJump;              }}              //route就是传递的name,component，navigator是一个Navigator的对象              renderScene={(route, navigator) => {                let Component = route.component;                /**                 *                     ... JSX的延展属性                   var props = {};                   props.propA = x;                   props.propB = y;                   var component = <Component {...props}/>                   这样 component 这个JSX元素有了props变量的所有属性                   navigator作为props传递给了这个component                 */                return <Component {...route.params} navigator={navigator} />              }} />        );    }}const styles = StyleSheet.create({    counter:{      flex:1,      justifyContent:'center',      alignItems:'center',      backgroundColor:'#e8e8e8'    }});

FirstPageComponent.js

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  Navigator,  TouchableOpacity,  View} from 'react-native';import SecondPageComponent from "./SecondComponent";export default class FirstPageComponent extends Component {        constructor(props){      super(props);      this.state = {      id: 2,      user: null,    };    _this = this;    }        render() {    if(_this.state.user){        return(            <View style={styles.counter}>                <Text>用户信息: {JSON.stringify(_this.state.user)}</Text>            </View>        );          } else {            return (                <View style={styles.counter}>                    <TouchableOpacity onPress={()=>{_this._pressButton()}}>                        <Text>查询ID为{_this.state.id}的用户信息</Text>                    </TouchableOpacity>                </View>            );        }           }    _pressButton(){      const {navigator} = this.props;        if(navigator) {            navigator.push({                name: 'SecondPageComponent',                component: SecondPageComponent,                /**页面间数据的传递 与将第二个页面如何将结果返回给第一个页面的方法                 *                  * 1.通过push,传递参数                 *   这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...                 *   id                 * 2.把上一个页面的实例或者回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state                 */                params: {                    id: _this.state.id,                    getUser(user) {                        _this.setState({                            user: user                        })                    },                }            })        }    }}const styles = StyleSheet.create({    counter:{      flex:1,      justifyContent:'center',      alignItems:'center',      backgroundColor:'#e8e8e8'    }});

SecondComponent.js

      import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  Navigator,  TouchableOpacity,  View} from 'react-native';import FirstPageComponent from './FirstPageComponent';const USER_MODELS = {    1: { name: 'mot', age: 23 },    2: { name: '晴明大大', age: 25 }};export default class SecondComponent extends Component {        constructor(props){      super(props);      this.state = {          id: null      };     _this = this;    }    _pressButton() {        const {navigator} = _this.props;        if (_this.props.getUser) {            let user = USER_MODELS[_this.props.id];            _this.props.getUser(user);        }        if (navigator) {            //把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent            navigator.pop();        }    }    componentDidMount() {      this.setState({id:_this.props.id});    }    render() {        return (            <View style={styles.counter}>                <Text>获得的参数:{_this.state.id}</Text>                <TouchableOpacity onPress={()=>{_this._pressButton()}}>                    <Text>点我跳回去</Text>                </TouchableOpacity>            </View>        );    }}const styles = StyleSheet.create({    counter:{      flex:1,      justifyContent:'center',      alignItems:'center',      backgroundColor:'#e8e8e8'    }});

链接：http://pan.baidu.com/s/1qXOnMAK 密码：xq34

0 0