react-native - español - react native developer

¿Cómo puedo usar buck para crear aplicaciones nativas para iOS y Android? (2)

Buck suena como una gran herramienta para los proyectos de iOS y Android, pero no he podido encontrar información sobre cómo usarlo para proyectos de reacción nativa.

Actualizar

Parece que se está trabajando en esto, pero aún no se recomienda.

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

Actualización 2

Enlace de dolores de producto https://productpains.com/post/react-native/add-buck-as-a-build-option

Todavía no hay documentación / plantilla oficial para compilar aplicaciones de RN con Buck, pero no debería ser tan difícil. build.gradle agregar un archivo BUCK que tenga el equivalente de lo que hace su archivo build.gradle .

Es principalmente solo:

Declara una aplicación de Android con una dependencia en React Native de JCenter (Buck tiene la regla android_binary para hacerlo)
En el modo de lanzamiento, también agrupa el JS en la carpeta de activos de su aplicación. Puede omitir esto para empezar (en modo dev la aplicación recupera el JS de localhost en tiempo de ejecución), pero creo que Buck también tiene soporte integrado para agrupar JS.

Actualización 8/6/2017:

Traté de seguir mis pasos a continuación para integrar React Native en una aplicación de iOS con Buck, pero me encontré con problemas al usar React Native 0.47. En su lugar, tengo un nuevo enfoque más simple para hacer que React Native trabaje con Buck en iOS mediante el enlace a bibliotecas preconstruidas. Bifurqué el repositorio del proyecto de muestra Buck y lo tengo trabajando con React Native en este repositorio . También actualicé el archivo README en ese repositorio con instrucciones para ejecutar la aplicación demo de Buck React Native para iOS y cómo integrarlo.

Tenga en cuenta que hay un par de problemas con este enfoque documentado en el archivo README que pueden o no ser un problema para usarlo en una aplicación de producción.

Ese repositorio tampoco agrupa el JS para la producción.

Respuesta anterior:

Tengo a Buck trabajando con un proyecto de iOS. Es mucho un trabajo en progreso, pero funciona. Algunas notas:

Copié manualmente archivos de node_modules/react-native/React y node_modules/react-native/Libraries (vea la estructura de carpetas a continuación).
Tuve que agregar los Wno-error -w y Wno-error a cada biblioteca porque el proyecto principal tenía advertencias de tratamiento como errores y no quería ver todas estas advertencias de React Native en Xcode.
Puede que tenga que agregar más bibliotecas siguiendo el patrón. También ayuda a mirar el podspec React Native.
Probablemente haya una oportunidad de resolver problemas, ya que no hay necesidad de reactnative.xcodeproj en la carpeta vendor/reactnative (ver a continuación).
Probablemente se necesita algo de trabajo para agrupar correctamente el JS para la producción. Actualmente solo funcionará si el JS se extrae de un servidor (por ejemplo, Node.js).

Aquí está mi archivo de vendor/reactnative/BUCK :

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'' ] )

Aquí está la estructura de la carpeta dentro de una carpeta de proveedor en mi proyecto:

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

Luego en las deps de mi archivo BUCK principal agrego:

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