Forked from react-native-webview-crosswalk
Cross-platform Webview component,With better performance on android.
react-native >=0.32.0, react >= 15.3.0
- From the root of your React Native project
npm install react-native-webkit-webview --save mkdir android/app/libs cp node_modules/react-native-webkit-webview/libs/xwalk_core_library-22.52.561.4.aar android/app/libs/- In
android/setting.gradle
... + include ':CrosswalkWebView', ':app' + project(':CrosswalkWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webkit-webview')- In
android/build.gradle
... allprojects { repositories { mavenLocal() jcenter() + flatDir { + dirs 'libs' + } } }- In
android/app/build.gradle
... dependencies { ... + compile (name: "xwalk_core_library-22.52.561.4", ext: "aar") + compile project(':CrosswalkWebView') }-
Register package :
-
In
android/app/src/main/java/com/YOUR_PROJECT_NAME/MainApplication.java
+ import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage; public class MainApplication extends Application implements ReactApplication { ...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), + new CrosswalkWebViewPackage() // <--- add this line ); } ...... }// DemoComponents.js import React,{ Component } from 'react' import { View,TouchableHighlight,Text } from 'react-native' import WebkitView from 'react-native-webkit-webview' import localDemoPage from './demoPage.html' export default class DemoComponents extends Component{ render(){ return ( <View> <TouchableHighlight onPress={ this.passMessageToWebpage }> <Text>Tell webpage some message</Text> </TouchableHighlight> <WebkitView source={ localDemoPage // local file usage} source={{ uri:'http://www.demo.com/path' //link usage }} injectedJavaScript="setTimeout(function(){document.write('WONDERFUL')},1000)" onMessage = { this.messageHandler } ref={ (webkitView) => { this.webkitView = webkitView } } /> </View> ) } passMessageToWebpage = () => { this.webkitView.postMessage('hello there') } messageHandler = (ev) => { console.log(ev) } }<!-- demoPage.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> window.addEventListener('message',(ev) => { console.log(ev); }) </script> </body> </html>MIT