React Native学习----react-native-webview-bridge

1. 下载组件 npm install react-native-webview-bridge --save

2. 自动链接库 react-native link react-native-webview-bridge 

3. 因为组件比较老，需要做改变引用头文件的方式，将组件所有的引用头文件都参考以下修改：（参考链接http://reactnative.cn/post/3277）

例：#import <React/RCTView.h>
#import <UIKit/UIKit.h>

#import <React/RCTAutoInsetsProtocol.h>
#import <React/RCTConvert.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTLog.h>
#import <React/RCTUtils.h>
#import <React/RCTView.h>
#import <React/UIView+React.h>
#import <objc/runtime.h>

4. 在h5页面中引用webviewbridge.js，在点击事件中调用：

WebViewBridge.send(url)

5. 在React Native中接收：

import WebViewBridge from 'react-native-webview-bridge';
....
onBridgeMessage(message) {
    const { webviewbridge } = this.refs;
    console.log('receiving message.....',message);
    this.props.nav.push({
        component: Ad,
        title: '优惠商户',
        passProps:{
            data:message,
        }
    });
}
....
render(){
...
    <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage.bind(this)}
        javaScriptEnabled={true}
        source={{uri: this.state.url, method: 'GET'}}
        style={{width: width, height:320,}} bonces={true} startInLoadingState={false}  scalesPageToFit={true}/>
....
}