https://github.com/react-native-china/react-native-webkit-webview
💼 Common webkit latest-feature-supported webview for both android and iOS platform
https://github.com/react-native-china/react-native-webkit-webview
Last synced: 9 months ago
JSON representation
💼 Common webkit latest-feature-supported webview for both android and iOS platform
- Host: GitHub
- URL: https://github.com/react-native-china/react-native-webkit-webview
- Owner: react-native-china
- License: mit
- Fork: true (jordaaash/react-native-webview-crosswalk)
- Created: 2017-06-09T15:27:38.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-25T01:28:30.000Z (over 8 years ago)
- Last Synced: 2025-01-16T15:33:48.574Z (over 1 year ago)
- Language: Java
- Homepage:
- Size: 38.3 MB
- Stars: 15
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-webkit-webview
[](https://nodei.co/npm/react-native-webkit-webview/)
[](https://travis-ci.org/react-native-china/react-native-webkit-webview)
[](https://opensource.org/licenses/mit-license.php)
[](https://github.com/react-native-china/react-native-webkit-webview)
Forked from [react-native-webview-crosswalk](https://github.com/jordansexton/react-native-webview-crosswalk)
Cross-platform Webview component,With better performance on android.
### Npm scripts sucks.Yarn recommended
### Dependencies
`react-native >=0.32.0`, `react >= 15.3.0`
### Installation
* From the root of your React Native project
```shell
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/
```
### Include module in your Android project
* In `android/setting.gradle`
```diff
...
+ include ':CrosswalkWebView', ':app'
+ project(':CrosswalkWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webkit-webview')
```
### Include libs in your Android project
* In `android/build.gradle`
```diff
...
allprojects {
repositories {
mavenLocal()
jcenter()
+ flatDir {
+ dirs 'libs'
+ }
}
}
```
* In `android/app/build.gradle`
```diff
...
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`
```diff
+ import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage;
public class MainApplication extends Application implements ReactApplication {
......
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
+ new CrosswalkWebViewPackage() // <--- add this line
);
}
......
}
```
#### Usage
```javascript
// 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 (
Tell webpage some message
{ this.webkitView = webkitView } }
/>
)
}
passMessageToWebpage = () => {
this.webkitView.postMessage('hello there')
}
messageHandler = (ev) => {
console.log(ev)
}
}
```
```html
Document
window.addEventListener('message',(ev) => {
console.log(ev);
})
```
## License
MIT