React Native 解决 Navigator.pop 无法传参数

Bob.Chen

发布于 2018-05-02 14:54:01

1.3K0

发布于 2018-05-02 14:54:01

文章被收录于专栏：程序员的诗和远方

紧接着上一篇文章 React Native 中实现二维码扫描当时扫是扫了，东西是出来了，但是并没有做界面返回，而自带的 navigator.pop 方法又没有参数传递，那不是白扫了吗？

封装 Navigator

好吧，这步其实和下面讲的没有什么关系，不过为了看下面内容的时候不会混淆，这里还是简单说下。

React Native 提供了两个导航组件，NavigatorIOS 和 Navigator。 NavigatorIOS 封装程度比较高，比较好用，但是只能在 iOS 上用，Navigator 相对封装程度比较低，但是为了以后能方便的给 Android 用，我们还是封装一下 Navigator。

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Navigator
} from 'react-native';

export default class Navigation extends Component {

    render() {
        return (
            <Navigator
                initialRoute = {{ name:'', component:this.props.component, index:0 }}
                configureScene = { ()=>{ return Navigator.SceneConfigs.FloatFromBottom; } }
                renderScene = {(route, navigator) => {
                    const RouteComponent = route.component;
                    return (
                        <View style={{ flex:1, paddingTop: 64 }}>
                            <RouteComponent navigator={navigator} route={route} {...route.passProps} />
                        </View>
                    )
                }} />
        )
    }
}

这里使用了 {...route.passProps} 是为了保持和 NavigatorIOS 一样的接口，这里转场动画规定了用从下到上弹出的方式，可以在 configureScene = { ()=>{ return Navigator.SceneConfigs.FloatFromBottom; } } 这里修改。

后面的 this.props.navigator 就是从 navigator={navigator} 这里来的。

调用的时候还有一点要注意，千万不要在 Navigator 外面包任何的 View 或者别的什么，会报错。

index.ios.js中调用：

  render() {
    return (
          <Navigation component={Xxxx} />
    );
  }

方法一 -- 使用回调

利用 passProps 传一个 callback 函数进去。

调用的地方，book_list.js：

    _changeText(val) {
        this.setState({
            keywords:val
        })
    }

    _scan(){
        this.props.navigator.push({
            component: ScanView,
            passProps: {
                navigator: this.props.navigator,
                callback: this._changeText
            }
        })
    }

这里的 this._changeText 换成一个匿名函数也可以。

返回的地方，scan_view.js：

    _show(val) {
        this.setState({
            code:val.data
        })

        // Use navigator pop
        if( this.props.callback ){
            this.props.callback(val.data)
        }

        if( this.props.navigator ){
            this.props.navigator.pop();
        }

    }

通过页面加回调函数的确可以解决这个问题，但是如果有多个页面要用到我扫描的数据，那我除了要在用到扫描数据本身的 View 里面做逻辑，在扫描这个 View 里面也要做逻辑，每多一个地方要传数据，就多一个回调函数。直觉告诉我，这很坑爹。

方法二 -- 使用 DeviceEventEmitter

DeviceEventEmitter 是 React Native 提供的，在 Native 和 JavaScript 之间传递消息用的。类似一个发布订阅模式，由 DeviceEventEmitter.emit 来发布消息，需要用到的地方使用 DeviceEventEmitter.addListener 来订阅消息。

调用的地方，book_list.js：

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('finishScan',this._changeText);
    }

    componentWillUnmount() {
        this.subscription.remove();
    }

注意，这里我们订阅消息是在组件 mount 之后，同时我们需要在合适的时候手动取消订阅 this.subscription.remove(); 否则可能会导致内存泄露。

返回的地方，scan_view.js：

    _show(val) {
        this.setState({
            code:val.data
        })

        // Use DeviceEventEmitter
        DeviceEventEmitter.emit('finishScan',val.data);

        if( this.props.navigator ){
            this.props.navigator.pop();
        }

    }

这里就是当我们扫描到东西，就触发一个叫 finisScan 的事件，并退出当前 View，在 book_list.js 中就可以收到这个事件，并做相应处理。如果有别的地方需要用到扫描的数据，直接订阅这个事件就可以了，在 scan_view.js 中不需要额外的处理。

在调试过程中，还遇到一个问题 A valid provisioning profile for this executable was not found 大意就是证书没了，打开我的调试设备 iPad，通用-描述文件与设备管理果然上周做扫描的时候用的证书没了，Xcode 打开项目，找到签名证书那里，原来这种测试证书是有期限的，一个星期，刚好刚才过期了。重新点一下又可以获得七天的 buff 了。