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