Как я могу использовать buck для создания интерактивных приложений для iOS и Android

Ответ 1

Обновление 8/6/2017:

Я попытался выполнить следующие шаги для интеграции React Native в приложение iOS с Buck, но я столкнулся с проблемами при использовании React Native 0.47. Вместо этого у меня есть новый более простой подход, чтобы заставить React Native работать с Buck на iOS, связавшись с предварительно построенными библиотеками. Я развернул репо проекта образца Buck и попросил его работать с React Native в это репо. Я также обновил README в этом репо с инструкциями по запуску демонстрационного приложения Buck React Native iOS и как интегрировать себя.

Обратите внимание, что существует пара проблем с этим подходом, задокументированным в README, который может или не может быть проблемой для использования этого в производственном приложении.

Это репо также не связывает JS для производства.

Старый ответ:

Я получил Бака, работающего с проектом iOS. Это очень большая работа, но работает. Несколько примечаний:

• Я вручную скопировал файлы из node_modules/react-native/React и node_modules/react-native/Libraries (см. ниже структуру папок).
• Мне пришлось добавить флаги -w и Wno-error в каждую библиотеку, потому что основной проект обрабатывал предупреждения как ошибки, и я не хотел видеть все эти предупреждения React Native в Xcode.
• Возможно, вам придется добавить дополнительные библиотеки по шаблону. Это также помогает взглянуть на React Native podspec.
• Возможно, есть возможность очистить вещи, так как нет необходимости в reactnative.xcodeproj в папке vendor/reactnative (см. ниже).
• Возможно, есть некоторая работа, необходимая для правильного объединения JS для производства. В настоящее время он работает только в том случае, если JS извлекается с сервера (например, Node.js).

Вот мой файл 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'
  ]
)

Вот структура папки внутри папки поставщика в моем проекте:

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

Затем в deps моего основного файла BUCK добавьте:

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

Ответ 2

Нет официальной документации/шаблона для создания приложений RN с Buck, но это не должно быть так сложно. Вам нужно будет добавить файл BUCK, который будет эквивалентен вашему файлу build.gradle.

В основном это просто:

• Объявляет приложение Android с зависимостью от React Native из JCenter (У Бака есть android_binary, чтобы сделать это)
• В режиме выпуска он также связывает JS в свои активы приложения папка. Вы можете пропустить это для начала (в режиме dev приложение извлекает JS из localhost во время выполнения), но я считаю, что Buck имеет встроенную поддержку для объединения JS.