react-native-crosswalk-webview-plus
Crosswalk's WebView for React Native on Android.
jordansexton,He developed the original project,but He hasn't been updated for two years so far (2018.9),and there are some bugs...,so I fix them and I add some new features
thanksDependencies
react-native >=0.57.0
,react >= 16.5.0
1. Installation
- From the root of your React Native project
npm install react-native-crosswalk-webview-plus --save oryarn add react-native-crosswalk-webview-plus
- copy
node_modules/react-native-webview-crosswalk/libs/xwalk_core_library-23.53.589.4-arm.aar
to your
android/app/libs
2.Include module in your Android project
- In
android/setting.gradle
...include ':CrosswalkWebView'project(':CrosswalkWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-crosswalk-webview-plus')
Include libs in your Android project
- In
android/build.gradle
...allprojects { repositories { mavenLocal() jcenter() flatDir { // <--- add this line dirs 'libs' // <--- add this line } // <--- add this line }}
- In
android/app/build.gradle
...dependencies { ... implementation (name: "xwalk_core_library-23.53.589.4-arm", ext: "aar") // <--- add this line implementation project(':CrosswalkWebView') // <--- add this line}
- Register package :
- used add code into MainApplication.java
// <--- add this line
Notes
- In development mode(yarn start) ,You should add the following code to MainApplication.java onCreate lifecyle
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
new XWalkView(this).onDestroy(); // just add this line for RN dev mode,and release mode you can delete it
}
Because when you open the WebView page input box to enter text, app will crash,may be activity change ApplicationContext when activity onResume,so we need init XWalkView on Create,some variables may be static ,so it get value onCreate,and It's exactly what XWalkView runtime need. and I hope react-native can fix this for later version,and it happend in development mode,release mode is OK,so you can delete in release mode
- The crosswalk.arr file I use only supports armeabi-v7a or armeabi 32 bit CPU, If you got this error
Java. Lang. RuntimeException: both Please have your activity extend XWalkActivity for Shared mode
maybe you should use others armeabi-v7a or armeabi cpu phone
features
1.props:
injectedJavaScript: PropTypesstring localhost: PropTypesbool onError: PropTypesfunc onMessage: PropTypesfunc onNavigationStateChange: PropTypesfunc onProgress: PropTypesfunc allowUniversalAccessFromFileURLs: PropTypesbool domStorageEnabled: PropTypesbool mediaPlaybackRequiresUserAction:PropTypesbool javaScriptEnabled:PropTypesbool userAgent:PropTypesstring scalesPageToFit:PropTypesbool saveFormDataDisabled:PropTypesbool source: PropTypes url:PropTypesstring
methods:
{}{}{}{}{}
useages:
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ ;; const instructions = Platform; type Props = {};<Props> { return <View style=stylescontainer> <View > <RCTCrossWalkWebView style=width:500flex:1 source=uri:'https://www.baidu.com'/> </View> </View> ; } const styles = StyleSheet;
License
MIT