在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么？

Question

我已经挖掘了许多帖子试图使用cocoapods为本地ios库设置一个本机项目,但我不可避免地#import <React/RCTBundleURLProvider.h>在我的AppDelegate.m文件中的语句中丢失了一个错误的文件.

什么是使用反应原生的可可豆荚的正确方法？在这篇文章发表时,我目前的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)因此,基于此SO帖子,我添加$(inherited)到Project> TestProject> BuildSettings> links> Other Linker Flags,否则为空.我还检查并发现它$(inherited)已经存在于目标>测试项目>构建设置>链接>其他链接器标志和预处理器宏中.

6)此时我在语句中看到React/RCTBundleURLProvider.h文件未找到错误#import <React/RCTBundleURLProvider.h>AppDelegate.m

7)基于此SO帖子,我尝试删除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

所以环境: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中的反应依赖项

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 subspecs以包含/删除RN功能,这是一个艰难的过程,因为RN组件不完全独立.

• pod install (将pod整合到项目中,将创建MyApp.xcworkspace,它应该用于编译应用程序)
• open 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

• 向Info.plist添加ATS例外(或者MyApp将无法使用http连接到打包服务器)

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

• 在Simulator中编译并运行,您应该看到红色屏幕,其中显示消息"无捆绑URL存在".(这是因为没有打包器服务器运行且没有编译的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,
  },
});

• npm start从根项目文件夹启动打包程序(MyApp)
• 从xcode运行应用程序,您应该看到加载指示器,然后看到RN渲染屏幕"欢迎来到React Native!"

包装机

• 您还应该添加packager构建步骤以将已编译的js嵌入到app bundle中,main.jsbundle这样它就可以在没有packager dev服务器的情况下运行.

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

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

这个步骤适合我.