web-dev-qa-db-fra.com

Comment définir le point d'entrée pour l'application native React

Je viens de commencer avec React Native et j'ai créé une application de base avec create-react-native-app.

J'ai fait une restructuration et créé quelques nouveaux dossiers et renommé App.js en Home.js. J'ai modifié le app.json pour contenir un point d'entrée faisant référence au nouveau Home.js fichier. Lorsque je charge l'application, rien ne se passe. Il n'y a pas d'erreur, il reste simplement sur l'écran d'exposition.

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

fichier app.json:

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

Comment définissez-vous le point d'entrée de l'application?

react-nativeexpo
10
TemporaryFix

si vous utilisez Expo, vous devez spécifier le point d'entrée dans votre fichier app.json comme ceci:

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

puis, à l'intérieur de ce fichier, vous devez enregistrer l'application avec Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT)

import Expo from 'expo'
...

class App extends Component {
  ...
}

export default Expo.registerRootComponent(App);

de cette façon, vous pouvez ajouter votre fichier d'entrée où vous le souhaitez.

17
Horacio Herrera

Vous devez mettre à jour le app.json Afin que le entryPoint soit le nouveau chemin d'accès au App.js.

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

Cependant, l'utilisation de Expo.registerRootComponent(App) provoque l'erreur suivante dans le SDK 32:

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

Il peut être fixe en important explicitement registerRootComponent, plutôt que d'essayer d'y accéder via Expo.registerRootComponent.

Voici un exemple App.js.

import { registerRootComponent } from 'expo';

class App extends React.Component {
  ...
}

export default registerRootComponent(App);
8
Andrew

Pour les projets Expo

Selon la documentation actuelle de l'Expo, si vous souhaitez un point d'entrée différent de App.js fichier, vous pouvez mettre à jour le package.json - ajoutez un champ main avec le chemin d'accès au point d'entrée souhaité. Ensuite, à l'intérieur du fichier de point d'entrée, vous devrez également enregistrer le composant racine de l'application. Expo le faisait automatiquement, lorsque le point d'entrée n'était pas spécifié et était le App.js fichier

package.json

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

entryPointFile.js

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

registerRootComponent(MyRootComponent);

Que faire si je veux nommer mon fichier d'application principal autre que App.js? - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my

2
kidroca

J'ai créé un projet par react-native-script. Dans le point d'entrée par défaut de l'application (App.js), vous exportez l'application qui importe à partir de votre entrée.

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

Fichier App.js:

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

Je préfère également mettre toutes les sources dans un dossier séparé, par exemple src/, et j'ai trouvé une solution différente:

  1. dans mon package.json, généré par expo cli, je vois que l'attribut principal est node_modules/expo/AppEntry.js.
  2. J'ai copié node_modules/expo/AppEntry.js to src/expoAppEntry.js et je viens de changer l'importation de l'application en import App from './App'; donc il pointe vers mon * src/App.tsx`
  3. alors bien sûr, j'ai changé l'attribut principal package.json en src/expoAppEntry.js.

Voir un exemple de travail ici https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js

0
Gianluca Casati