解决React Native 自带的WebView组件在Android设备上不能拦截URL的问题

解决React Native 自带的WebView组件在Android设备上不能拦截URL的问题

JavaScript 混合移动开发

访问GitHub主页

共3Star

详细介绍

App webview sd-webview

webview for sd app

  • 面向Android端 拦截所有url跳转 放到js中处理 是否拦截。
  • 增加图片选择支持。

Prepare

Installation

  1. 进入项目根目录
  2. .gitignore文件增加一行 private_modules/ 若已有 请忽略
  3. 在项目根目录执行:
mkdir private_modules
git clone git@github.com:vsona/react-native-webview.git ./private_modules/sd-webview
Android

android/settings.gradle

include ':sd-webview'
project(':sd-webview').projectDir = new File(rootProject.projectDir, '../private_modules/sd-webview/android')

android/app/build.gradle

dependencies {
   ...
   compile project(':sd-webview')
}

MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new RockWebViewPackage(RockWebViewConfig.newInstance(" android ****"))
    );
}

Usage

import WebViewCommon from '../../../private_modules/sd-webview/rockWebView'

...
        <WebViewCommon ref={(webCommon) => {
          this.webCommon = webCommon
        }}
          source={this.state.source}
          onNavigationStateChange={this.onNavigationStateChange}
          onMessage={this.onMessage}
          startInLoadingState={true}
          shouldDoOtherActionWithoutLoadUrl={this.shouldDoOtherActionWithoutLoadUrl}
          renderLoading={this.renderLoading}
          renderError={this.renderError}
          />
...

TODO

PR's welcome!

推荐源码