Question

对于iOS和Android项目来说，降压听起来像是一个很好的工具，但我还没有找到有关如何将它用于反应原生项目的任何信息。

更新

看起来有一些工作要做，但可能还不推荐。

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

更新2

产品难题链接https://productpains.com/post/react-native/add-buck-as-a-build-option

Answer 1

更新8/6/2017：

我尝试按照以下步骤将React Native集成到带有Buck的iOS应用程序中，但在使用React Native 0.47时遇到了问题。相反，我有一个新的更简单的方法，通过链接到预构建的库让React Native在iOS上与Buck一起工作。我分叉了Buck示例项目repo并让它在this repo中使用React Native。我还更新了该repo中的README，其中包含运行演示Buck React Native iOS应用程序以及如何集成自己的说明。

请注意，README中记录的此方法存在一些问题，这些问题在生产应用程序中使用时可能存在问题，也可能不存在问题。

该回购公司还没有捆绑JS用于生产。

旧答案：

我让Buck正在使用iOS项目。这是一项正在进行的工作，但有效。几点说明：

我从node_modules/react-native/React手动复制了文件 node_modules/react-native/Libraries（请参阅下面的文件夹结构）。
我必须向每个库添加-w和Wno-error标志，因为主项目将警告视为错误，我不想在Xcode中看到所有这些React Native警告
您可能需要在模式后添加更多库。它还有助于查看React Native podspec。
可能有机会清理一下，就像reactnative.xcodeproj文件夹中不需要vendor/reactnative一样（见下文）。
可能需要一些工作来正确捆绑JS以进行生产。目前，只有从服务器（例如Node.js）获取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

然后在我的主BUCK文件的deps中添加：

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

Answer 2

目前还没有正式的文档/模板可以用Buck构建RN应用程序，但它不应该那么难。您需要添加一个与您的build.gradle文件相同的BUCK文件。

它主要是：

声明一个依赖于React Native from JCenter的Android应用（Buck有android_binary规则来执行此操作）
在发布模式下，它还会bundles the JS进入您应用的资源夹。你可以跳过这个开始（在开发模式下，应用程序在运行时从localhost获取JS）但我相信Buck也内置了对捆绑JS的支持。

我如何使用buck为iOS和Android构建react-native应用程序

2 个答案: