如何定义react原生应用的入口点

cpjpxq1n  于 2023-03-19  发布在  React
关注(0)|答案(9)|浏览(172)

我刚刚开始使用react native,并使用create-react-native-app创建了一个基础应用程序。
我做了一些重组,做了一些新的文件夹,并将App.js重命名为Home.js。我修改了app.json,使其包含一个引用新Home.js文件的入口点。当我加载应用程序时,没有任何React。没有错误,它只是停留在expo屏幕上。

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

app.json文件:

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

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

7qhs6swi

7qhs6swi1#

如果你正在使用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);

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

tquggr8v

tquggr8v2#

您需要更新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);
wnvonmuf

wnvonmuf3#

世博项目

根据当前的Expo文档,如果你想要一个不同于App.js文件的入口点,你可以更新package.json--添加一个main字段,其中包含所需入口点的路径。然后在入口点文件中,你还必须注册应用的root组件。Expo是自动完成这项工作的。当入口点未指定且为App.js文件时
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

stszievb

stszievb4#

如果您的项目处于托管工作流设置(默认设置)中,如doc中所述,则必须导入registerRootComponent,并在您希望成为主文件的文件中使用根组件作为参数调用它:

import { registerRootComponent } from 'expo';

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

registerRootComponent(AnyName)

然后,在package.json文件中,将“main”更改为该文件的相对路径,如下所示

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

omhiaaxx5#

我通过react-native-script创建了项目。在应用程序的默认入口点(App.js)中,您可以导出从您的入口导入的应用程序。

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

文件应用程序js:

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

nzk0hqpo6#

我还喜欢将所有源代码放在一个单独的文件夹中,例如src/,我发现了一个不同的解决方案:
1.在我的package.json(由expo cli生成)中,我看到主要属性是 node_modules/expo/AppEntry.js
1.我将 node_modules/expo/AppEntry.js 复制到 src/expoAppEntry.js,并将应用程序导入更改为import App from './App';,以便它指向我的 *src/App.tsx '。
1.然后我当然将package.json的主属性更改为 src/expoAppEntry.js
请参见此处的工作示例https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js

gcuhipw9

gcuhipw97#

对于使用Expotypescript的用户,您不必在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将查找并从那里开始构建应用程序的结构。

nwlqm0z1

nwlqm0z18#

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

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

在这里你可以改变你的入口点。最初它被设置为App,查看该组件来自哪里的import语句。

tsm1rwdh

tsm1rwdh9#

在使用expo时,我不希望主入口点位于app/index.js,而是希望主入口点位于项目根目录的App.tsx。我只是在package.json(通过比较空白expo项目的模板代码找到的)中添加了这一行:

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

相关问题