Thereact-native version 0.17.1 has been achieved This component , this project is no longer being maintained.

react-native-webview

已经实现的属性和方法

Props

bool

string

string

function

string

bool

method

Installation and How to use

Step 1 - NPM Install

npm install --save react-native-webview

Step 2 - Update Gradle Settings

// file: android/settings.gradle...include':reactwebview',':app' project(':reactwebview').projectDir=newFile(rootProject.projectDir,'../node_modules/react-native-webview')// if there are more library// include ':app' , ':libraryone' , ':librarytwo' , 'more...'// project(':libraryonename').projectDir = new File(rootProject.projectDir, '../node_modules/libraryonemodule')// project(':librarytwoname').projectDir = new File(rootProject.projectDir, '../node_modules/librarytwomodule')// more..

Step 3 - Update app Gradle Build

// file: android/app/build.gradle...dependencies {...    compile project(':reactwebview')}

Step 4 - Register React Package

...importcom.heng.wheel.WheelPackage;publicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {privateReactInstanceManagermReactInstanceManager;privateReactRootViewmReactRootView;@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {super.onCreate(savedInstanceState);mReactRootView =newReactRootView(this);mReactInstanceManager =ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(newMainReactPackage())                .addPackage(newWebViewPackage())// register webview package                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        ...    }...

Step 5 - Require and use in Javascript

// file: index.android.jsvarReact=require('react-native');var{  AppRegistry,  StyleSheet,}=React;varWebView=require('react-native-webview');varWebViewTest=React.createClass({goBack:function(){this.refs.webview.goBack();},goForward:function(){this.refs.webview.goForward();},reload:function(){this.refs.webview.reload();},_onNavigationStateChange:function(event){//event.canGoBack//event.canGoForward//event.url//event.title//event.loading},render:function(){varreqUrl="https://github.com/";return(<WebViewref='webview'automaticallyAdjustContentInsets={true}url={reqUrl}javaScriptEnabledAndroid={true}onNavigationStateChange={this._onNavigationStateChange}style={styles.webview}/>);}});varstyles=StyleSheet.create({webview:{flex:1,},});...

Notes

// file: react-native-wheel/build.gradleandroid {    compileSdkVersion23//@    buildToolsVersion"23.0.1"//@    defaultConfig {        minSdkVersion16         targetSdkVersion22//@    }}dependencies {    compile'com.facebook.react:react-native:0.16.1'//@}

Remark

Run Renderings