20

Buck 听起来对于 iOS 和 Android 项目来说都是一个很棒的工具，但我还没有找到任何关于如何将它用于 react-native 项目的信息。

更新

看起来有一些工作正在进行中，但可能还不推荐。

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

4

2 回答 2

4

2017 年 8 月 6 日更新：

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

请注意，自述文件中记录的这种方法存在几个问题，在生产应用程序中使用它可能会或可能不会出现问题。

该 repo 还没有将 JS 捆绑到生产环境中。

较旧的答案：

我让 Buck 处理一个 iOS 项目。这在很大程度上是一项正在进行的工作，但有效。几点注意事项：

  • node_modules/react-native/React我从and 手动复制了文件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

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

'//vendor/reactnative:ReactNative',
'//vendor/reactnative:RCTWebSocket',
'//vendor/reactnative:RCTText',
'//vendor/reactnative:RCTNetwork',
'//vendor/reactnative:RCTImage'
于 2016-08-16T04:55:34.780 回答
2

目前还没有使用 Buck 构建 RN 应用程序的官方文档/模板，但应该不会那么难。您需要添加一个与您的文件等效的 BUCK 文件build.gradle。

主要是：

  • 从 JCenter声明一个依赖于React Native的 Android 应用程序（Buck 有android_binary这样做的规则）
  • 在发布模式下，它还将JS 捆绑到应用程序的资产文件夹中。你可以跳过这个开始（在开发模式下，应用程序在运行时从 localhost 获取 JS），但我相信 Buck 也内置了对捆绑 JS 的支持。
于 2016-01-26T19:15:05.920 回答