ios - 在 ios 中将 cocoapods 与 React Native (0.43.4) 一起使用的正确方法是什么？

Question

我浏览了很多帖子，试图使用 cocoapods 为原生 ios 库设置一个 React Native 项目，但我不可避免地以 #import <React/RCTBundleURLProvider.h> 中丢失文件的错误告终。我的声明 AppDelegate.m文件。

将 cocoa pods 与 react-native 一起使用的正确方法是什么？在写这篇文章时，我当前的 RN 版本是 0.43.4，我使用的是 Xcode 8.2.1。

这是我的过程，很好奇我可能哪里出错了:

1) 在终端中，我使用 react-native init TestProject 创建了一个新项目

2) 我运行 pod init在该项目的 ios 目录中

3) 我在我的 podFile 中添加一个依赖项并运行 pod install

4) 安装过程成功，但我看到警告说我的目标是 override the 'OTHER_LDFLAGS ' 建议我使用 $(inherit)在我的 Xcode 链接器标志中。

5) 所以基于this SO post我添加 $(inherited)到 Project> TestProject > BuildSettings > linking> Other Linker Flags 否则它是空的。我还检查并看到 $(inherited)已经出现在 Targets > TestProject> Build Settings> Linking> Other Linker Flags 和 PreProcessor Macros 中。

6) 此时我在 #import <React/RCTBundleURLProvider.h> 上看到 React/RCTBundleURLProvider.h file not found 错误AppDelegate.m 中的声明

7) 基于this SO post我尝试删除 node modules目录并返回终端运行 npm install完成后 'react-native upgrade' .当它问我是否要替换 AppDelegate.m 时和 project.pbxproj文件我说是。

8) 回到 xCode，我清理了我的构建，但仍然有来自第 6 步导入 <React/RCTBundleURLProvider.h> 的错误

Answer 1

我只是从干净的 Xcode 项目开始制作整个过程。通常我简单地创建 RN 应用程序，弹出然后转换为 cocoapods ios 部分。它主要基于 RN 文档:http://facebook.github.io/react-native/docs/0.51/integration-with-existing-apps.html

So环境:macOS Sierra，Xcode 9.2，RN 0.51.0

项目名称:MyApp

准备

• 从“Single View App”模板、产品名称“MyApp”、语言 Objective-C 创建新的 Xcode 项目
• 运行，看看它是否有效
• cd MyApp, mkdir ios, mv MyApp* ios(将所有 ios 相关文件移动到 ios 子文件夹)

安装npm依赖

在项目的根文件夹中创建 package.json(非常基本)

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0"
  },
  "devDependencies": {
    "babel-jest": "22.0.4",
    "babel-preset-react-native": "4.0.0"
  }
}

运行 npm install

Seup cocoapods

• cd ios
• pod init(生成 Podfile)
• 在 MyApp 目标的 Podfile 中声明 React 依赖

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'RCTAnimation',
    'RCTBlob',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTImage',
    'RCTLinkingIOS',
    'DevSupport',
  ]
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

您可以添加/删除 React 子规范以包含/删除 RN 功能，这是一个艰难的过程，因为 RN 组件不是完全独立的。

• pod install(将pods集成到项目中，将创建MyApp.xcworkspace，应该用于编译应用)
• 打开 MyApp.xcworkspace，构建并运行，应用程序应该仍然可以工作

嵌入 RN Root View

用这段代码替换你的 AppDelegate.m:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  RCTBundleURLProvider* provider = [RCTBundleURLProvider sharedSettings];
  NSURL* jsCodeLocation = [provider jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MyApp" initialProperties:@{}];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

• 将 ATS 异常添加到 Info.plist(否则 MyApp 将无法使用 http 连接到 packager 服务器)

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

• 在 Simulator 中编译并运行，您应该会看到带有消息“No bundle URL present”的红屏。 (这是因为没有 packager 服务器在运行并且没有编译的 jsbundle 存在)

Javascript 部分

使用此代码创建 MyApp/index.js(它来自 RN 模板):

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp', () => App);

创建MyApp/App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

• 从根项目文件夹 (MyApp) 启动打包程序 npm start
• 从 xcode 运行应用程序，您应该看到加载指示器，然后是 RN 渲染的屏幕，其中显示“Welcome to React Native!”

打包器

• 您还应该添加 packager 构建步骤以将编译后的 js 嵌入到应用程序包 main.jsbundle 中，这样它就可以在没有 packager 开发服务器的情况下运行。

使用以下内容将脚本步骤添加到 MyApp 目标的构建阶段:

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

这个步骤对我有用。