Wie kann ich mit buck reaktive native Apps für iOS und Android erstellen?

Question

Buck klingt wie ein großartiges Werkzeug für iOS- und Android-Projekte, aber ich habe keine Informationen darüber gefunden, wie man es für reaktive native verwendet Projekte.

aktualisieren

Sieht aus wie es einige Arbeit geleistet wird, aber es kann noch nicht empfohlen werden.

https://github.com/facebook/nuclide/issues/31#issuecomment-164897170 https://github.com/facebook/buck/tree/master/test/com/facebook/buck/js

Update 2

Produkt Pains Link https://productpains.com/post/react-native/add-buck-as-a-build-option

Answer 1

Es gibt keine offizielle Dokumentation/Vorlage für noch RN-Anwendungen mit Buck Gebäude, aber es sollte nicht so schwer sein. Sie müssten eine BUCK-Datei hinzufügen, die dem entspricht, was Ihre build.gradle-Datei tut.

Es ist meist nur:

• erklärt, einen Android-App mit einer Abhängigkeit von React Native from JCenter es
• Im Release-Modus (Buck die android_binary Regel, dass zu tun hat) auch bundles the JS in Ihre App Vermögenswerte Ordner. Du könntest das für einen Anfang überspringen (im Dev-Modus holt die App zur Laufzeit JS von localhost), aber ich glaube, Buck hat eingebaute Unterstützung für die Bündelung von JS.

Answer 2

-Update 2017.08.06:

habe ich versucht, meine Schritte folgende unten für Native in einen iOS-App mit Buck Reagieren Integration aber ich lief Probleme in, wenn Einheimischer 0,47 Reagieren mit. Stattdessen habe ich einen neuen, einfacheren Ansatz, um React Native mit Buck auf iOS zu verbinden, indem ich mit vorgefertigten Bibliotheken verlinke. Ich gab dem Buck-Beispielprojekt-Repo den Vortritt und arbeitete mit React Native in . Ich aktualisierte auch die README in diesem Repo mit Anweisungen zum Ausführen der Demo Buck React Native iOS App und wie Sie sich integrieren.

Beachten Sie, dass einige Probleme mit diesem in der README dokumentierten Ansatz für die Verwendung in einer Produktions-App ein Problem darstellen.

Dieses Repo bündelt das JS noch nicht für die Produktion.

---

Ältere Antwort:

Ich habe Buck mit einem iOS-Projekt arbeiten. Es ist sehr viel Arbeit im Gange, aber funktioniert. Ein paar Anmerkungen:

• ich manuell kopiert Dateien von node_modules/react-native/React und node_modules/react-native/Libraries (siehe unten Ordnerstruktur).
• Ich musste die -w und Wno-error Flags zu jeder Bibliothek hinzufügen, weil das Hauptprojekt als Warnungen behandelt hatte, und ich wollte nicht alle diese React Native Warnungen in Xcode sehen.
• Sie müssen möglicherweise weitere Bibliotheken nach dem Muster hinzufügen. Es hilft auch, den React Native podspec zu betrachten.
• Es gibt wahrscheinlich Gelegenheit, Dinge aufzuräumen, wie es reactnative.xcodeproj in der vendor/reactnative Ordner nicht benötigt (siehe unten).
• Es ist wahrscheinlich etwas Arbeit erforderlich, um das JS für die Produktion korrekt zu bündeln. Derzeit funktioniert es nur, wenn JS von einem Server (z. B. Node.js) abgerufen wird.

Hier ist meine vendor/reactnative/BUCK Datei:

vendor/reactnative 
├── BUCK 
├── Libraries 
│   ├── ART 
│   ├── ActionSheetIOS 
│   ├── AdSupport 
│   ├── Animated 
│   ├── AppRegistry 
│   ├── AppState 
│   ├── BatchedBridge 
│   ├── BugReporting 
│   ├── CameraRoll 
│   ├── Components 
│   ├── CustomComponents 
│   ├── DebugComponentHierarchy 
│   ├── Devtools 
│   ├── EventEmitter 
│   ├── Experimental 
│   ├── Fetch 
│   ├── Geolocation 
│   ├── Image 
│   ├── Inspector 
│   ├── Interaction 
│   ├── JavaScriptAppEngine 
│   ├── LayoutAnimation 
│   ├── Linking 
│   ├── LinkingIOS 
│   ├── Modal 
│   ├── NativeAnimation 
│   ├── NavigationExperimental 
│   ├── Network 
│   ├── Promise.js 
│   ├── PushNotificationIOS 
│   ├── QuickPerformanceLogger 
│   ├── RCTTest 
│   ├── RKBackendNode 
│   ├── ReactIOS 
│   ├── ReactNative 
│   ├── Sample 
│   ├── Settings 
│   ├── Storage 
│   ├── StyleSheet 
│   ├── Text 
│   ├── Utilities 
│   ├── Vibration 
│   ├── WebSocket 
│   ├── promiseRejectionIsError.js 
│   ├── react-native 
│   └── vendor 
├── React 
│   ├── Base 
│   ├── Executors 
│   ├── Layout 
│   ├── Modules 
│   ├── Profiler 
│   └── Views 
└── reactnative.xcodeproj 
    ├── project.pbxproj 
    └── xcuserdata 

Dann in der deps meiner Haupt BUCK Datei, die ich hinzufügen:

apple_library(
    name = 'ReactNative', 
    srcs = glob([ 
    'React/**/*.m', 
    'React/**/*.mm', 
    'React/**/*.c', 
    'React/**/*.S', 
    ]), 
    exported_headers = glob([ 
    'React/**/*.h', 
    ]), 
    system_frameworks = [ 
    'JavaScriptCore' 
    ], 
    exported_linker_flags = [ 
    '-lc++', 
    ], 
    compiler_flags = [ 
    '-Wno-error', 
    '-w' 
    ], 
    visibility = ['PUBLIC'], 
) 

apple_library(
    name = 'RCTWebSocket', 
    srcs = glob([ 
    'Libraries/WebSocket/*.m', 
    ]), 
    headers = glob([ 
    'React/**/*.h', 
    ]), 
    exported_headers = glob([ 
    'Libraries/WebSocket/*.h', 
    ]), 
    compiler_flags = [ 
    '-Wno-error', 
    '-w' 
    ], 
    visibility = ['PUBLIC'], 
    deps = [ 
    ':ReactNative', 
    ] 
) 

apple_library(
    name = 'RCTNetwork', 
    srcs = glob([ 
    'Libraries/Network/*.m', 
    ]), 
    headers = glob([ 
    'React/**/*.h', 
    ]), 
    exported_headers = glob([ 
    'Libraries/Network/*.h', 
    ]), 
    compiler_flags = [ 
    '-Wno-error', 
    '-w' 
    ], 
    visibility = ['PUBLIC'], 
    deps = [ 
    ':ReactNative', 
    ] 
) 

apple_library(
    name = 'RCTText', 
    srcs = glob([ 
    'Libraries/Text/*.m', 
    ]), 
    headers = glob([ 
    'React/**/*.h', 
    ]), 
    exported_headers = glob([ 
    'Libraries/Text/*.h', 
    ]), 
    compiler_flags = [ 
    '-Wno-error', 
    '-w' 
    ], 
    visibility = ['PUBLIC'], 
    deps = [ 
    ':ReactNative', 
    ] 
) 

apple_library(
    name = 'RCTImage', 
    srcs = glob([ 
    'Libraries/Image/*.m', 
    ]), 
    headers = glob([ 
    'React/**/*.h', 
    'Libraries/Network/*.h' 
    ]), 
    exported_headers = glob([ 
    'Libraries/Image/*.h', 
    ]), 
    compiler_flags = [ 
    '-Wno-error', 
    '-w' 
    ], 
    visibility = ['PUBLIC'], 
    deps = [ 
    ':ReactNative', 
    ':RCTNetwork' 
    ] 
) 

Hier wird die Ordnerstruktur in einem Anbieter-Ordner in meinem Projekt ist :

'//vendor/reactnative:ReactNative', 
'//vendor/reactnative:RCTWebSocket', 
'//vendor/reactnative:RCTText', 
'//vendor/reactnative:RCTNetwork', 
'//vendor/reactnative:RCTImage'