React Native WebView jsbridge - Complete the Correspondence between web and Native

React Native WebView jsbridge 是在react-native-community/react-native-webview基础上开发的native与web的通信，做到开箱即用。

目录

• 支持的平台
• 自动安装
• 手动安装
• Native端使用
• web端集成
• 故障排除

支持的平台

• iOS (支持 UIWebView，WKWebView)
• Android (使用腾讯X5内核)

自动安装

使用npm

$ npm install mf-react-native-webview-jsbridge -save

或使用yarn

$ yarn add mf-react-native-webview-jsbridge

然后

$ react-native link mf-react-native-webview-jsbridge

手动安装

iOS

1. Libraries文件下右键Add Files to 'xxx'...,添加RNCWebView.xcodeproj.
2. 在Linked Frameworks and Libraries添加libRNCWebView.a

Android

1. 在你的工程下的android/settings.gradle:

...
include ':mf-react-native-webview-jsbridge'
project(':mf-react-native-webview-jsbridge').projectDir = new File(rootProject.projectDir, '../node_modules/mf-react-native-webview-jsbridge/lib/android')

2. 在你的工程下的android/app/build.gradle:

...
dependencies {
  ...
  implementation project(':mf-react-native-webview-jsbridge')
}

3. 添加 import com.airbnb.android.react.maps.MapsPackage;，new MapsPackage() 在你的 MainApplication.java

import com.reactnativemf.webview.ReactNativeWebViewPackage;
...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new ReactNativeWebViewPackage()
        );
    }

Native端使用

Import the WebView component from react-native-webview and use it like so:

import React, { Component } from "react";
import { StyleSheet, Text, View, Dimensions, TouchableOpacity } from "react-native";
import { WebView } from "react-native-webview";

// ...
class MyWebComponent extends Component {
  componentDidMount() {
    /**
     * 参数1：名称
     * 参数2： 传递给js的参数
     * 参数3： 回调函数，获取js返回的参数
     */
    this.webviewRef && this.webviewRef.registerHandler('getJsInfo', 'oc传给了js一条信息', (res)=> {
      Alert.alert(res.msg);
    });
  }
  render() {
    const size = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ marginTop: 20 }}
          onPress={this.handPress}
        >
          <Text>App调用Web端提供的方法</Text>
        </TouchableOpacity>
        <WebView
          ref={refs => (this.webviewRef = refs)}
          useWebKit
          style={{ width: size.width, height: size.height }}
          source={{ uri: '' }}
        />
      </View>
    );
  }
  handPress = () => {
    /**
     * 参数1：名称
     * 参数2： 传递给js的参数
     * 参数3： 回调函数，获取js返回的参数
     */
    this.webviewRef.callHandler('getJsMethod', '', (data) => {
      Alert.alert(data);
    });
  }
}

关于webview的API Reference

web端集成

请参考此文件进行web配置点击前往;

故障排除

• 如果你遇到 Invariant Violation: Native component for "RNCWKWebView does not exist" 你可以使用 react-native link 或者手动链接
• 'config.h' file not found或replace glog-0.3.X：

cd node_modules/react-native/third-party/glog-0.3.4
./configure

License

MIT