Utilisation d'un fichier à entrée unique pour l'application native de réaction

Question

Je tente d'utiliser un fichier d'entrée unique pour Android et iOS dans une application React Native.

J'ai suivi quelques tutoriels et ont fini avec les éléments suivants:

index.js

import React, { Component } from 'react'; 
import { Text } from 'react-native'; 

export default class Main extends Component { 
    render() { 
     return (
     <Text>Hello world! from both IOS and Android</Text> 
    ); 
    } 
} 

index.ios.js

import React from 'react'; 
import { AppRegistry } from 'react-native'; 
import {Main} from './index'; 


AppRegistry.registerComponent('Main',() => Main); 

je me retrouve avec les éléments suivants erreur:

Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Si je supprime les accolades de Main dans la déclaration d'importation, il est dit '... mais got: object', donc j'ai l'impression que c'est quelque chose à voir avec mon exportation/importation mais rien ne semble fonctionner. Toute aide serait appréciée.

Answer 1

Vous exportez votre Main composants tels que:

export default class Main extends Component { 

mais l'importation comme:

import {Main} from './index'; 

Le default export doit être importé comme:

import Main from './index'; 

Si vous utilisez l'exportation par défaut, vous devez importer comme ça. Si cela ne fonctionne pas, il doit y avoir un autre problème dans votre code.

Answer 2

React Native tente d'importer en fonction de la plate-forme. Par exemple, si vous avez index.ios.js et index.android.js dans le même dossier, React Native groupera index.ios.js uniquement s'il s'agit d'un regroupement pour ios. Il est possible que lorsque vous importez à partir de ./index, React Native effectue la rotation du chemin avec index.ios.js au lieu de index.js car vous empochez ios.

Si vous êtes assez curieux, vous pouvez essayer de console.log le contenu du module importé, par ex. console.log(Main) pour voir ce qui est réellement importé.