web-dev-qa-db-fra.com

Comment utiliser index.js au lieu de (index.ios.js, index.Android.js) dans React Native pour une application multiplate-forme?

Merci pour les réponses à partir de maintenant,

Je suis un débutant dans React Native, je souhaite créer une application multiplate-forme et j'ai donc créé index.js:

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

class ReactApp extends Component {

    render() {
        return (
            <View><Text>Hello world</Text></View>
        );
    }
}

module.exports = ReactApp;

Ensuite, j'ai importé index.js depuis index.ios.js et index.Android.js comme ceci:

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

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

Je pense qu'après ça devrait marcher mais j'obtiens ceci Erreur:

 enter image description here

javascriptandroidiosreact-nativecross-platform
15
davut dev

Après React v0.49, vous n'avez plus besoin de index.ios.js et index.Android.js. Vous avez seulement besoin du index.js:

import {AppRegistry} from 'react-native';
import App from './app/App';

AppRegistry.registerComponent('appMobile', () => App);

(remplacez appMobile par le nom de votre application)

Source: ( https://github.com/facebook/react-native/releases/tag/v0.49.0 )

Les nouveaux projets ont désormais un seul point d’entrée (index.js)

32
Floris M

Vous allez à ce sujet en arrière. index.ios.js et index.Android.js seront toujours des points d’entrée distincts dans un projet react-native init par défaut. Si vous souhaitez qu'ils exécutent la même base de code via index.js, vous devez le configurer de manière à ce que index.ios.js et index.Android.js importent index.js et enregistre le même composant de base défini dans index.js.

Par exemple, vous pouvez voir comment cela fonctionne dans cet exemple d'application ToDo ( rapport Github ici ).

Si vous placez index.js dans votre dossier racine, il entrera en conflit avec index.Android.js et index.ios.js si vous ne le faites pas directement référence. Vous devrez donc indiquer le chemin exact dans votre importation. Voir le code ci-dessous.

index.ios.js et index.Android.js (même contenu)

import React from 'react';
import { AppRegistry } from 'react-native'
import ReactApp from './index.js'
// Had you placed index.js in another folder like `./app`, you could instead do your import with this shorthand:
// import ReactApp from './app'

AppRegistry.registerComponent('ReactApp', () => ReactApp)

index.js

// Note: I noticed that you imported Component from the wrong place. That might also be contributing to your issue so I fixed it here.
import React, { Component } from 'react';
import {
    View,
    Text,
} from 'react-native';

// Unless you are exporting multiple things from a single file, you should just use this.
// It's more idiomatic than using module.exports = ReactApp;
export default class ReactApp extends Component {
    render() {
        return (
            <View><Text>Hello world</Text></View>
        );
    }
}
7
Michael Cheng

Dans iOS AppDelegate.m, changez cela

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

à

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
1
FOLOF