Wie man gemeinsamen Code mit node.js verwaltet - Für eine reaktive native Perspektive

Question

Früher glaubte ich, dass eines der Ziele von react-native darin bestand, viel Code über mehrere Plattformen hinweg wiederverwenden zu können. Je mehr ich lese, scheint es nicht der Fall zu sein (oder einer der primären Fälle). Was ich erreichen will, ist eine Projektstruktur wie:

project 
    +- app 
     +- components 
    +- android 
    +- ios 
    +- web 

Wo app/components die meisten der gemeinsamen Code enthalten, die wir schreiben, die wiederverwendet werden können, indem android/ios (von reagieren-native) und web a Spring Boot-Projekt, das Zeug von app/components auch mit react-native-Web verwenden kann, um ein JS, das im Web gehostet werden kann, zu packen.

Lassen Sie uns sagen, dass ich ein Layout erstellen möchten, die Ich mag würde überall verwenden:

import {View, Text} from 'react-native' 

class MyView extends Component { 
    render() { 
     return (
      <View><Text>Welcome!</Text></View> 
     ); 
    } 
} 

Ich gehe davon aus, dass react-native geladen wird, wie von der node_modules in den spezifischen Projekten erforderlich (react-native-web für web und react-native für ios/android).

Nun, wie importiere ich diese erstellte Ansicht in allen drei Projekten? Ich bin mir nicht sicher, ob dies die beste Projektstruktur ist, die es gibt. Was wäre der richtige Weg? Sollte app eigene package.json haben? Selbst wenn das der Fall ist, glaube ich nicht, dass npm Unterprojekte unterstützt, ebenso wie gradle (ich weiß, Äpfel zu Orangen Vergleich, aber ich glaube nicht, dass ein Build-System wie Schluck/Webpack auch funktioniert, bitte korrigieren Sie mich wenn Ich liege falsch).

EDIT

So experimentierte ich mit diesem ein wenig. Das Problem ist, dass ich nicht die folgende Struktur haben:

project 
    app 
    android 
    ios 
    web 
     package.json 
    package.json 

Wenn es irgendwelche Pakete sind häufig in web/package.json und package.json Ich erhalte eine Duplicate module name: AutoFocusUtils, von wahrscheinlich node-haste (was einige dep-Management-System auf facebook gebaut zu sein scheint) .

Auch aus irgendeinem Grunde, wenn web von webpack Aufbau erfordert irgendwie ich die babel-preset-* und react-native Abhängigkeiten im Zusammenhang mit app zu haben, die immer noch in Ordnung ist, ich denke ich, dass später aus arbeiten kann.

Also zog ich es ein wenig herum:

project 
    app 
     package.json 
    native 
     android 
     ios 
     index.android.js 
     index.ios.js 
     package.json 
    web 
     package.json 

Alles war in Ordnung, aber von index.android.js, kann ich nicht diese mehr tun:

import MyView from './../app/myview' 

Ich erhalte eine Fehlermeldung am Telefon sagen Requiring unknown module ./../app/myview . Es funktioniert jedoch problemlos von web (beim Erstellen mit Webpack). Mein webpack.config falls es hilft: http://pastebin.com/RzmWDgFe

EDIT

ich endlich eine Codestruktur erreicht, die wir gerne mit.Falls jemand hier nach einer funktionierenden Lösung sucht: http://git.nomadly.in/rohan/react-native-tri-platform-starter

Answer 1

Sie haben Recht; Wiederverwendung von Codes ist ein wichtiges Verkaufsargument. Wie Sie wahrscheinlich wissen, verwendet der native Package-Agent die Datei .ios.js oder , um zu bestimmen, welche Version geladen werden soll. Also IMHO der beste Weg, um Ihren Code zu strukturieren, ist eine Struktur wie Sie vorgeschlagen mit web, android, ios nur die spezifischen Dateien für die Plattformen (HTML, Xcode-Projekt, etc.) und alle reagieren Komponenten in der app/Komponenten-Verzeichnis . Für eine optimale Wiederverwendung sollten Sie Ihre Top-Level-Komponenten (und alle anderen möglichen) so schreiben, dass sie unabhängig vom System sind und minimale Komponenten enthalten (z. B. Headline, FullscreenImage usw.), die dann plattformabhängig sind.