react-native-webview 加载本地 HTML 文件但得到纯文本

Question

我尝试加载一个 HTML 文件，该文件依赖于其他 .js 文件。

所以我写了这样的代码，但是在 webview 中得到的是纯文本。

render = () => {
    let source;
    if (__DEV__) {
      source = require('./vendor/Editor/index.html');
    } else {
      source =
        Platform.OS === 'ios'
          ? require('./vendor/Editor/index.html')
          : {uri: 'file:///android_asset/vendor/Editor/index.html'};
    }

    return (
      <WebView
        startInLoadingState
        source={source}
        onMessage={this.handleMessage}
        automaticallyAdjustContentInsets={false}
        style={[
          AppStyles.container,
          styles.container,
          {height: this.state.visibleHeight},
        ]}
      />
    );
  };

而且我把代码简化成这样，但是还是不行。

  render = () => {
    setTimeout(() => {
      this.webview.injectJavaScript(
        'window.ReactNativeWebView.postMessage(document.body.innerHTML)',
      );
    }, 3000);

    return (
      <WebView
        source={require('./vendor/GrEditor/index.html')}
        onMessage={e => console.log('e: ', e)}
      />
    );
  };

抱歉语法不好。

Answer 1

要在 android 中加载本地 html 文件，即使在开发模式下，您也需要使用 android 资产路径。所以它会是这样的：

let source = Platform.OS === 'ios'
          ? require('./vendor/Editor/index.html')
          : {uri: 'file:///android_asset/vendor/Editor/index.html'};

将您的供应商文件夹复制到 android 的资产文件夹 (project_folder\android\app\src\main\assets) 中。
这里是 link 供您参考：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files

react-native-webview 加载本地 HTML 文件但得到纯文本

react-native-webview load a local HTML file but got plain text

javascript

reactjs

react-native

react-native-android

react-native-webview