Deprecated
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Screenshot init Dec 21, 2015
src/main init Dec 21, 2015
.gitignore
README.md
build.gradle
index.js init Dec 21, 2015
package.json init Dec 21, 2015

README.md

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

react-native-webview

android webview for react-native

已经实现的属性和方法

Props

  • automaticallyAdjustContentInsets
bool
  • html
string
  • injectedJavaScript
string
  • onNavigationStateChange
function
  • url
string
  • javaScriptEnabledAndroid
bool

method

  • goBack
  • goForward
  • reload

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 = new File(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

...
import com.heng.wheel.WheelPackage;

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new WebViewPackage()) // register webview package
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        ...
    }
...

Step 5 - Require and use in Javascript

// file: index.android.js

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
} = React;

var WebView = require('react-native-webview');

var WebViewTest = 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() {
    var reqUrl = "https://github.com/";
    return (
        <WebView
          ref='webview'
          automaticallyAdjustContentInsets={true}
          url={reqUrl}
          javaScriptEnabledAndroid={true}
          onNavigationStateChange={this._onNavigationStateChange}
          style={styles.webview}/>
    );
  }
});

var styles = StyleSheet.create({
  webview: {
    flex: 1,
  },
});

...

Notes

  • Only in the following versions tested , other versions do not guarantee success
// file: react-native-wheel/build.gradle

android {
    compileSdkVersion 23  //@
    buildToolsVersion "23.0.1"  //@

    defaultConfig {
        minSdkVersion 16 
        targetSdkVersion 22  //@
    }
}

dependencies {
    compile 'com.facebook.react:react-native:0.16.1'  //@
}

Remark

在模拟器运行会提示以下错误: Webpage not available

The webpage at "xxx" could not be loaded because:

net::ERR_NAME_NOT_RESOLVED

暂未寻找解决方案,目前建议打包导出后在真机运行

Run Renderings