如何为 React Native 应用程序定义入口点

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",
    ...
  }
}

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

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/，我找到了一个不同的解决方案：

在我的 package.json 中，由 expo cli 生成，我看到主要属性是 node_modules/expo/AppEntry.js.
我将 node_modules/expo/AppEntry.js 复制到 src/expoAppEntry.js 并将 App 导入更改为 import App from './App'; 所以它指向我的 *src/App.tsx`
当然我把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 的人，您不必在 [=] 的入口点末尾添加 .tsx 24=]。例如，您的入口点可以是：

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

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

Answer 8

入口点可以在node_modules/expo/AppEntry.js.. 这是在 Expo Typescript 中...

import registerRootComponent from 'expo/build/launch/registerRootComponent';
 import App from '../../src/App';
 registerRootComponent(App);

在这里您可以更改您的入口点。最初它被设置为应用程序，查看该组件来自的导入语句。

如何为 React Native 应用程序定义入口点

How to define entry point for react native app

react-native

expo

世博项目