wake-up-neo.net

Wie verwende ich index.js anstelle von (index.ios.js, index.Android.js) in React Native für plattformübergreifende Apps?

Vielen Dank für die Antworten von jetzt an

Ich bin ein Neuling in React Native, ich möchte eine plattformübergreifende App erstellen, also habe ich index.js erstellt:

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;

Dann habe ich index.js aus index.ios.js und index.Android.js wie folgt importiert:

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

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

Ich denke, danach sollte es funktionieren, aber ich bekomme diese Fehlermeldung:

 enter image description here

15
davut dev

Nach React v0.49 benötigen Sie index.ios.js und index.Android.js nicht. Sie benötigen nur den index.js:

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

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

(Ersetzen Sie appMobile durch den Namen Ihrer App.)

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

Neue Projekte haben ab sofort einen einzigen Einstiegspunkt (index.js)

32
Floris M

Du machst das rückwärts. index.ios.js und index.Android.js sind immer separate Einstiegspunkte in einem Standard-react-native init-Projekt. Wenn Sie möchten, dass dieselbe Codebase über index.js ausgeführt wird, sollten Sie index.ios.js und index.Android.js import index.js so einrichten, dass sie dieselbe Basiskomponente registrieren, die in index.js definiert ist.

Sie können zum Beispiel in dieser Beispiel-ToDo-App ( Github-Repo hier ) nachsehen, wie es gemacht wird.

Wenn Sie index.js in Ihrem Stammordner ablegen, führt dies zu Konflikten mit index.Android.js und index.ios.js, wenn Sie nicht direkt darauf verweisen. Sie müssen also auf den genauen Pfad in Ihrem Import zeigen. Siehe den Code unten.

index.ios.js und index.Android.js (gleicher Inhalt)

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

Ändern Sie dies in iOS AppDelegate.m

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

zu

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