如何在React-Native Webview中运行React JS构建？

Question

我创建了一个完整的离线ReactJS Web应用程序，并希望使用React-Native从Web View在Android应用程序中运行它。

我按照以下步骤操作：
1. 使用以下命令创建编译后的ReactJS Web应用程序：build

npm run build

2. 然后我创建了一个react-native项目，并且放置了以下架构的build文件夹

3. 我更新了App.js文件，内容如下：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, WebView} from 'react-native';
import {roscon} from "./build/index.html";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{height: 300, width: 300,overflow:'hidden' }}>
          <WebView
            source={{uri: roscon}}
            scalesPageToFit={true}
            domStorageEnabled={true}
            javaScriptEnabled={true}
            startInLoadingState={true}
          />
      </View>
    );
  }
}

在运行这段代码后，我本来期望能够运行我的ReactJS Web应用程序，但实际上只出现了一个白屏。请问可能是什么原因导致的呢？我该如何让我的ReactJS Web应用程序在react-native上运行？

注：我已经成功地使用npm命令运行了生成的“build”文件夹。

serve -s build

但我仍然无法弄清楚如何将它作为WebView移植到React Native项目中。

- Yash Kaushal

---

可能是重复的问题：(React Native)如何将本地HTML文件加载到WebView中。 - Arnaud Christ

测试过了，没有起作用。 - Desmnd

你应该能够使用Chrome开发者工具来检查React Native应用程序中的Web视图。你能否尝试并展示出任何可能出现的错误？ - JensV

嗨，@JensV，我回复晚了，但是我解决了那个问题。我还评论了我是如何做到的。 - Desmnd

Answer 1

经过研究和测试，我找到了解决方案。主要问题是编译后的 build 文件夹以静态 HTML 形式呈现，并且需要一个 服务器 用于服务页面。

因此，我遵循了这个链接 （https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths） 来获取 build 项目并使其运行。然后，将其与 nodejs Android 项目样例 集成，以便在 Android 上作为 Webview 运行我的 build 文件夹。

注意：我还尝试了 react-snapshot 和 react-snap，但它们没有给出令人满意的结果。

- Desmnd

Answer 2

尝试正确地要求HTML文件，并将其传递给source属性，方法如下：

 <WebView
    source={require('./build/index.html')}
 />

- OmidP

---

尝试过了，但它只呈现了原始的HTML代码，所以它没有起作用。 - Desmnd

Answer 3

安装

npm install react-native-react-bridge

这些用于在 WebView 中呈现 React 应用程序 npm install react-dom react-native-webview

要求

1. react 16.8+
2. react-native 0.60+

用法

1. 修复 metro.config.js，以使用此库中的 babelTransformer。

         module.exports = { 
 transformer: {
  babelTransformerPath: 
 require.resolve('react-native-react- >. 
   .bridge/lib/plugin'),
       ...
    },
 };     

为React应用程序创建入口文件。web.js

从"react"中导入React和useState，从"react-native-react-bridge/lib/web"中导入webViewRender、emit和useSubscribe。

const Root = () => {
  const [data, setData] = useState("");
  // useSubscribe hook receives message from React Native
  useSubscribe((message) => {
    if (message.type === "success") {
      setData(message.data);
    }
  });
  return (
    <div>
      <div>{data}</div>
      <button
        onClick={() => {
          // emit sends message to React Native
          //   type: event name
          //   data: some data which will be serialized by JSON.stringify
          emit({ type: "hello", data: 123 });
        }}
      />
    </div>
  );
};

// This statement is detected by babelTransformer as an entry point
// All dependencies are resolved, compressed and stringified into one file
export default webViewRender(<Root />);

3. 在你的React Native应用中使用带有WebView的入口文件。

import React from "react";
import WebView from "react-native-webview";
import { useBridge } from "react-native-react-bridge";
import webApp from "./WebApp";

const App = () => {
  // useBridge hook create props for WebView and handle communication
  // 1st argument is the source code of React app
  // 2nd argument is callback to receive message from React
  const { ref, source, onMessage, emit } = useBridge(webApp, (message) => {
    // emit sends message to React
    //   type: event name
    //   data: some data which will be serialized by JSON.stringify
    if (message.type === "hello" && message.data === 123) {
      emit({ type: "success", data: "succeeded!" });
    }
  });

  return (
    <WebView
      // ref, source and onMessage must be passed to react-native-webview
      ref={ref}
      source={source}
      onMessage={onMessage}
    />
  );
};

- Manish Singh Chouhan