React Native 错误：无法从 ` 解析模块`./index` - 多个问题答案

【问题标题】：React Native Error: Unable to resolve module `./index` from `` - multiple issuesReact Native 错误：无法从 ` 解析模块`./index` - 多个问题
【发布时间】：2020-04-25 07:16:54
【问题描述】：

我用这个boilerplate。我几乎让React Native 在我的 Android 设备上工作。但不知何故，它在最后一步失败了，因为它没有找到index.js 文件。但该文件位于我的项目中。

所以当我现在在 src/ 中运行它时

yarn react-native run-android

这是 Node CLI 窗口：

所以我的问题是：

Error: Unable to resolve module `./index` from ``:

None of these files exist:
  * index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

从控制台本身我看不到任何问题：

所以不知何故它没有找到 index.js 文件。

我已经尝试过yarn react-native start -- --reset-cache，但没有任何改变。

编辑#1：

当我在根文件夹中添加一个假的空index.js 文件时，错误消失了，在模拟器中我得到了这个：

编辑#2：

我离解决方案越来越近了。我只是将这个添加到根目录中的假 index.js 中：

import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './src/app.json';
AppRegistry.registerComponent(appName, () => App);

我得到了：

编辑#3：

现在它帮助我用以下内容覆盖app.json：

{
  "name": "test",
  "displayName": "test"
}

新的错误是：

编辑#4：

我现在将所有内容移回src 文件夹。所以在根目录下不再有 index.js 了。现在这工作得很好。通常的react-scripts start 正在运行。还有react-native start 运行。 run-android 的问题已在 MainApplication.java 中得到解决

protected String getJSMainModuleName() {
  return "index.android";
}

到

protected String getJSMainModuleName() {
  return "src/index.android";
}

我认为这是位置的另一个问题......

【问题讨论】：

为什么要在src文件夹中添加index,js？
ps：你可以使用这个模板也可以使用 typescript (react-native init MyApp --template react-native-template-typescript )
我是 React 新手。但是那个样板文件是这样说的：github.com/howtographql/react-apollo/tree/master/src 所以这是错的吗？最好只放在根目录？
是的，如果你使用 typescript 它会更好，如果项目变得更大一点，它会让你的生活更轻松
好的，我现在切换到 TypeScript。但我还是有问题。我得到不同的错误，但最重要的是找到 index.js 文件Could not find a required file. Name: index.js Searched in: E:\Azure\myapp_werserver_new\src error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

标签： android reactjs react-native android-emulator

【解决方案1】：

所以主要问题相对容易解决。所需要做的就是拥有一个占位符App.js 文件和另一个index.js 文件。如何做到这一点详细here。以下是简短说明：

首先将现有的App.js 文件移动到src/App.js。

现在在主文件夹中创建一个新的App.js：

import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
  return (
    <HybridApp />
  );
}
export default App;

同时创建一个新的src/index.js 文件：

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById("root"));

所有其他问题都与使用错误的技术有关。就像你不能在 React Native 中使用 window 一样。这里需要重写代码才能再次工作。

【讨论】：