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}/>
....
}