android - 在 Android Webview 上运行 create-react-app 的构建

Question

我想在 Android 的 WebView 中运行 create-react-app 的构建。当我使用 JavaScript 和 CSS 运行一个简单的 Web 应用程序时，它运行良好。但是在尝试运行 create-react-app 时，我最终得到了一个空屏幕。

以下是我遵循的步骤:

1. 我对 create-react 应用程序使用了以下命令:

   npm install -g create-react-app

   创建 react 应用我的应用

2. 我使用以下方法创建了构建文件:

   npm 运行构建

3. 我将构建文件夹复制并粘贴到 Assets 目录下的 Android 项目结构中。 The build files in my Android Project Structure

4. 我的主要 Activity 代码:

   公共(public)类 MainActivity 扩展 AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   
       WebView view = (WebView) findViewById(R.id.web_view);
       WebSettings webSettings = view.getSettings();
       webSettings.setJavaScriptEnabled(true);
       view.loadUrl("file:///android_asset/build/index.html");
   }
   

我在运行 Android 应用程序时出现空白屏幕。我做错了什么？

Answer 1

解决这两个问题

1. 让CRA建立相对路径，

打开CRA项目的package.json，在同级"version"标签后添加"homepage": "." .

1. 在 react-router 中使用 HashRouter。

react-router 如果您正在使用并且您应该使用的话。我们通常使用BrowserRouter。 HashRouter 非常无用，建议 not to use .但这种场景是使用HashRouter的最佳场所。

附言。如果您需要更多解释或示例，请发表评论，我也会进行编辑和添加