Wie verwendet man index.js anstelle von (index.ios.js, index.android.js) in React Native für Cross-Plattform-App?

Question

Danke für die Antworten von jetzt an,

ich ein Neuling in india Reagieren bin, habe ich ein Cross-Plattform-App machen will, so habe ich 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; 

Dann importierte ich Index Js von beiden index.ios.js und index.android.js wie folgt aus:

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

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

ich denke, danach sollte es funktionieren, aber ich bekomme diese Fehler:

Answer 1

Nach Reagieren v0.49, Sie don brauche nicht index.ios.js und index.android.js. Sie brauchen nur die index.js:

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

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

(appMobile mit dem Namen Ihrer App ersetzen)

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

New projects have a single entry-point (index.js) from now on

Answer 2

Sie gehen rückwärts darüber. index.ios.js und index.android.js sind immer separate Eingangspunkte in einem Standardprojekt react-native init. Wenn Sie möchten, dass sie dieselbe Codebasis über index.js ausführen, sollten Sie sie so einrichten, dass index.ios.js und index.android.jsindex.js importieren und die gleiche Basiskomponente wie in index.js definiert registrieren.

Zum Beispiel können Sie sehen, wie es in diesem example ToDo app (Github repo here) getan wird.

Wenn Sie index.js in Ihrem Stammordner platzieren, wird es mit index.android.js und index.ios.js in Konflikt geraten, wenn Sie es nicht direkt verweisen. Sie müssen also auf den genauen Pfad Ihres Imports zeigen. Siehe den folgenden Code.

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> 
     ); 
    } 
}