美文网首页reactNative
React Native页面跳转、传值与回调

React Native页面跳转、传值与回调

作者: M_慕宸 | 来源:发表于2016-08-26 13:27 被阅读17390次

欢迎光临,客官里边请

前言:

我本是一枚安静的iOS程序猿,记得那是一个月黑风高夜,公司五楼只有我和经理两人,而我正在看电影《死寂》。忽然,感觉有人摸我的肩,顿时菊花一紧,猛然回头,好吧,就知道是经理。找我说了一堆,大致就是以后尝试用React Native开发iOS和Android,虽然我有点不情愿,但谁让我是小弟呢,只好开始学习这个东东。
好了,闲蛋扯完了,下面进入主题:今天要讲的就是React Native页面跳转、传值与回调

正文:

注:
  1. 代码是ES6语法,不懂得可以到这瞅瞅阮老师ES6入门,还有这个ES5,ES6写法对照
  2. 我今天就站在巨人的肩膀上更深层次的剖析一下,以这个日志新手理解Navigator的教程为基础讲解,如果大家看懂了这个日志,那我讲的你们就不要看了,浪费亲们时间,我们只讲精华。
  3. 共涉及三个js文件,SampleComponent.js注册程序入口,FirstPageComponent.js页面一,SecondPageComponent.js页面二。
Let's do it

先分析下面这段代码:SampleComponent.js

import React from 'react';
import {
    View,
    Navigator, 
    AppRegistry
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SampleComponent extends React.Component { 
   render() {
       let defaultName = 'FirstPageComponent'; 
       let defaultComponent = FirstPageComponent;
    return (
        <Navigator
            initialRoute={{ name: defaultName, component: defaultComponent }}
            configureScene={(route) => {
                return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
              }}
            renderScene={(route, navigator) => {
                let Component = route.component;
                //这个语法是把 routes.params 里的每个key作为props的一个属性,在下个页面即可用this. props.id调用
                //navigator对象在导航容器跳转时一直存在
                return <Component {...route.params} navigator={navigator} />
              }}
        />
    );
  }
}

FirstPageComponent.js:

//FirstPageComponent.js
import React from 'react';
import {
    View,
    Navigator
} from 'react-native';

import SecondPageComponent from './SecondPageComponent';

export default class FirstPageComponent extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            id: 2,
            user: null,
        }
    }

    _pressButton() {
        let _this = this;
        const { navigator } = this.props;
    //为什么这里可以取得 props.navigator?请看上文:
    //<Component {...route.params} navigator={navigator} />
    //这里传递了navigator作为props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
    //这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
    //routes.params 里的每个key 作为props的一个属性:
    //这里的 params.id 就变成了 <Navigator id={} 传递给了下一个页面
                params: {
                    id: this.state.id,
                    //回调!从SecondPageComponent获取user
                    getUser: function(user) {
                        _this.setState({
                            user: user
                        })
                    }
                }
            });
        }
    }

    render() {
        if( this.state.user ) {
            return(
                <View>
                    <Text>用户信息: { JSON.stringify(this.state.user) }</Text>
                </View>
            );
        }else {
            return(
                <View>
                    <TouchableOpacity onPress={this._pressButton.bind(this)}>
                        <Text>查询ID为{ this.state.id }的用户信息</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }
}

SecondPageComponent.js:


const USER_MODELS = {
    1: { name: 'mot', age: 23 },
    2: { name: '晴明大大', age: 25 }
};

import React from 'react';
import {
    View,
    Navigator
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            id: null
        }
    }

    componentDidMount() {
        //这里获取从FirstPageComponent传递过来的参数: id
        this.setState({
            id: this.props.id
        });
    }

    _pressButton() {
            const { navigator } = this.props;
            
            if(this.props.getUser) {
                let user = USER_MODELS[this.props.id];
    //回调传值给上个页面
                this.props.getUser(user);
            }
                
            if(navigator) {
    //出栈,返回到上一页
                navigator.pop();
            }
    }

    render() {
        return(
            <View>
                <Text>获得的参数: id={ this.state.id }</Text>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>点我跳回去</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

相关文章

网友评论

  • 吉凶以情迁:<btn myxxx=function(){}/>请问这种自定义属性原生传递触发怎么写?
  • 纪小衰:你们用RN了?我也在学。。。知道我是谁不???
  • 爱吃板栗的小女孩:你好,我用的上面方法,点击没有跳转,也没有报错,为什么?
  • Sxiaobai:大神问一下 直接从iOS向ReactNative传值怎么操作
  • 3262d7c36ca3://第一个界面
    _addInvoicePayment(contractId) {
    NavigatorRoute.pushtToAddInvoicPaymentPage(this.props.navigator,contractId,);
    }
    //第二个界面
    _addPayment() {

    if(selectedOption != -1) {
    if(this.props.getPayment) {
    this.props.getPayment(1);
    this._back();
    }

    }
    }

    //路由跳转
    static pushtToAddInvoicPaymentPage(navigator,contractId) {
    navigator.push({
    component:AddInvoicPaymentPage,
    contractId:contractId,
    params:{
    getPayment:function (payment) {
    this.setState({payment:payment});
    }
    }

    });
    }

    问题:第二个界面无法获得push里面个getpayment,因此无法进行回调?这个要怎么解决呢
  • 秋夜已凉:简直就是棒

本文标题:React Native页面跳转、传值与回调

本文链接:https://www.haomeiwen.com/subject/ptohsttx.html