紧接着上一篇文章 React Native 中实现二维码扫描 当时扫是扫了,东西是出来了,但是并没有做界面返回,而自带的 navigator.pop 方法又没有参数传递,那不是白扫了吗?
好吧, 这步其实和下面讲的没有什么关系,不过为了看下面内容的时候不会混淆,这里还是简单说下。
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 是 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 了。
有时候当你意识到用了一种不好的方法实现了某个功能的时候,你需要去寻找寻找是否有更优雅的方法,毕竟人生已经如此的艰难,不要为自己挖坑。