如何定义反应原生应用程序的入口点

Question

我刚刚开始使用 react native，并使用create-react-native-app 创建了一个基础应用程序。

我进行了一些重组并创建了一些新文件夹并将 App.js 重命名为 Home.js。我修改了app.json 以包含一个引用新Home.js 文件的入口点。当我加载应用程序时，没有任何反应。没有错误，它只是停留在博览会屏幕上。

.
 -components
 -screens
    -Home
        Home.js
 -config
 -node_modules
 -tests
 app.json

app.json 文件：

{
  "expo": {
    "sdkVersion" : "23.0.0",
    "entryPoint" : "./screens/Home/Home.js"
  }
}

如何定义应用的入口点？

Answer 1

我通过 react-native-script 创建了项目。在应用程序（App.js）的默认入口点中，您导出从您的条目导入的应用程序。

- node_modules
- App.js
- build
    - main.js

文件 App.js：

import App from './build/main'
export default App

Answer 2

如果您使用 Expo，则必须在 app.json 文件中指定入口点，如下所示：

{
  "expo": {
    "entryPoint": "./src/app/index.js"
  }
}

然后，在该文件中，您需要使用Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT) 注册应用程序

import Expo from 'expo'
...

class App extends Component {
  ...
}

export default Expo.registerRootComponent(App);

这样你可以在任何你想要的地方添加你的入口文件。

Answer 3

您需要更新app.json，使entryPoint 成为App.js 的新路径。

{
  "expo": {
    "entryPoint": "./src/App.js",
    ...
  }
}

但是在 SDK 32 中使用 Expo.registerRootComponent(App) 会导致以下错误：

undefined is not an object (evaluating '_expo.default.registerRootComponent') 

可以通过显式导入registerRootComponent 来修复，而不是尝试通过Expo.registerRootComponent 访问它。

这是一个示例App.js。

import { registerRootComponent } from 'expo';

class App extends React.Component {
  ...
}

export default registerRootComponent(App);

Answer 4

世博项目

根据当前的 Expo 文档，如果您想要与 App.js 文件不同的入口点，您可以更新 package.json - 添加带有所需入口点路径的 main 字段。然后在入口点文件中，您还必须注册应用程序的 root 组件。当没有指定入口点并且是 App.js 文件时，Expo 会自动执行此操作

package.json

{
 "main": "my/customEntry.js"
}

entryPointFile.js

import { registerRootComponent } from 'expo';
import MyRootComponent from './MyRoot';

registerRootComponent(MyRootComponent);

---

如果我想将我的主应用文件命名为 App.js 以外的名称怎么办？ - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my

Answer 5

我也更喜欢将所有资源放在一个单独的文件夹中，例如 src/，我找到了一个不同的解决方案：

1. 在我的由 expo cli 生成的 package.json 中，我看到主要属性是 node_modules/expo/AppEntry.js。
2. 我将 node_modules/expo/AppEntry.js 复制到 src/expoAppEntry.js 并将 App 导入更改为 import App from './App'; 所以它指向我的 *src/应用程序.tsx`
3. 然后我当然将 package.json 的主要属性更改为 src/expoAppEntry.js。

在此处查看工作示例https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js

Answer 6

如果您的项目在 托管工作流 设置（默认设置）中，如 doc 中所述，您必须导入 registerRootComponent 并在文件中使用您的根组件作为参数调用它你想成为主要的：

import { registerRootComponent } from 'expo';

const AnyName() { ... } // Your root component

registerRootComponent(AnyName)

然后，在您的 package.json 文件中，将“main”更改为此文件的相对路径，例如

{
  "main": "src/main.js"
}

Answer 7

对于那些使用 Expo 和 typescript 的人，您不必在 app.json 的入口点末尾添加 .tsx。例如，您的入口点可以是：

{
  "expo": {
    "entryPoint": "./app/components/AppEntryPoint/App.component",
    "name": "Sample App",
     ...
     }
  ...
}

在本例中，入口点组件的名称是 App.Component.tsx。但是不提及扩展程序也可以使用。除此之外，在根组件中，写export default registerRootComponent(AppComponent) 或registerRootComponent(AppComponent) 都应该起作用，因为从文件中导出组件仅意味着其他文件也可以使用它。在这里不写应该不是问题，因为我们在 app.json 中提到这是根组件。 App.json 将查找并从那里开始构建应用程序的结构。