如何定义React Native App的入口点

我刚开始使用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"
  }
}

如何定义应用程序的入口点？

如果您使用的是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);

这样，您可以在任何想要的地方添加输入文件。

您需要更新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访问它来 filex 。

这是示例App.js。

import { registerRootComponent } from 'expo';
class App extends React.Component {
  ...
}
export default registerRootComponent(App);

用于博览会项目

根据当前的博览会文档，如果您想要与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);

如果我想命名我的主应用程序文件，该怎么办？ - https：//docs.expo.io/versions/latest/sdk/register-root-component/#what-what-if-i-want-to-name-my-my

如果您的项目在托管Workflow setup（默认一个）（默认一个），如文档中所述，您必须导入RegisterRootComponent作为参数，在文件中，您希望成为主要的：

import { registerRootComponent } from 'expo';
const AnyName() { ... } // Your root component
registerRootComponent(AnyName)

然后，在您的 package.json 文件中，更改" main"到此文件相对路径，例如

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

i通过React-Native-Script创建了项目。在app（app.js）的默认入口点中，您导出了从您的条目导入的应用程序。

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

文件app.js：

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

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

在我的软件包中。
我复制 node_modules/expo/appenry.js src/expoappentry.js ，然后将应用程序导入到 import App from './App';，因此它指向我的 *src/app。tsx`
然后，我当然更改了包装。

请参阅此处的工作示例https://github.com/fibo/tris3d-app/blob/master/src/src/expoappentry.js

对于那些使用 expo 使用 typescript 的人，您不必在APP中的入口点的末尾添加.tsx。JSON。例如，您的入口点可以是：

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

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

入口点可以在node_modules/expo/appentry.js ..中找到。这是在Expo TypeScript中...

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

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

使用EXPO时，我不希望它在App/Index.js中，而是希望它是项目根部的主要入口点。我只是将此行添加到我的软件包。

"main": "node_modules/expo/AppEntry.js",

用于博览会项目

相关内容

最新更新

热门标签：