rn项目 假如cocoapods_在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么？...

我只是从干净的Xcode项目开始制作整个过程.通常我简单地创建RN应用程序,弹出然后转换为cocoapods ios部分.

它主要基于RN docs：

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,它应该用于编译应用程序)

>打开MyApp.xcworkspace,build&运行,应用程序应该仍然有效

嵌入RN Root View

用这个片段替换你的AppDelegate.m：

#import "AppDelegate.h"

#import

#import

#if RCT_DEV

#import

#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连接到打包服务器)

NSAppTransportSecurity

NSExceptionDomains

localhost

NSTemporaryExceptionAllowsInsecureHTTPLoads

>编译&在模拟器中运行时,您应该会看到红色屏幕,并显示“没有捆绑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 (

Welcome to React Native!

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {

fontSize: 20,textAlign: 'center',margin: 10,});

>启动打包器npm从根项目文件夹(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

这个步骤对我有用.