React Native 导入原生Xcode项目总结与记录React Native 导入原生Xcode项目总结与记录飞跃科技百家号背景最近学习RN、根据中文网上的教程导入原生Xcode项目过程中遇到很多坑、所以记录一下自己集成的过程，顺便重新梳理一下思路，方便日后使用，如果能帮到同样学习RN的新手，那就更好了说明：本记录依据RN中文网，并根据自己实践整理而成1.集成RN到iOS应用步骤大体步骤如下：简单了解和学习要导入的RN组件创建一个Podfile 通过cocoaPods来导入我们需要的植入的RN组件创建js文件，编写RN组件的源代码添加一个事件处理函数、用于创极爱一个RCTRootView。这个view就是RN的根视图，用来承载你的RN组件，它必须在你对应的index.ios.js 中使用APPRegistry注册的模块名字启动RN的Packager服务，运行应用根据需要添加更多的RN组件调试程序准备部署发布（比如可以利用react-native-xcode.sh脚本）发布2.开发环境准备基础环境 首先要安装React Native在iOS平台上所需的一切依赖软件（如npm，node等） --- RN开发环境搭建传送门CocoaPods环境 cocoaPods是针对iOS和Mac开发的包管理工具，做过开发的并使用它管理过三方库的一点都不陌生，同样RN框架的代码也通过它来下载并添加到项目中。 ---- cocoaPods安装使用教程传送门3.示例APP示例程序采用2048小游戏，下面是尚未植入RN时候的页面4.依赖包React Native的植入过程中需要React 和 React Native两个node依赖包。package.json具体的依赖包会记录在package.json文件中，如果项目中没有的自己创建吧（推荐使用 Sublime Text）对于一个典型的RN项目来说，一般package.json和index.ios.js等文件会放在项目的根目录下。而iOS相关的源代码会放在一个名为ios/的子目录中，这里同样放着Xcode项目文件（.xcodeproj）下面是我的package.json示例示例中的version字段没有太大意义（除非你要把你的项目发布到npm仓库）。scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。{ "name": "NumberTileGame", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "^15.4.2", "react-native": "0.42" } } 我集成时候的最新版为15.4.2 和0.42，但是这个更新很快，你做的时候可能已经是新版了，5.安装依赖包使用npm（node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。 在包含有package.json文件的目录（一般也就是项目根目录）中运行下列命令来安装：$ npm install6.通过Pods导入React Native框架React Native框架整体是作为node模块安装到项目中的。下一步我们需要在CocoaPods的Podfile中指定我们所需要使用的组件。6.1 Subspecs在你开始把React Native植入到你的应用中之前，首先要决定具体整合的是React Native框架中的哪些部分。而这就是subspec要做的工作。在创建Podfile文件的时候，需要指定具体安装哪些React Native的依赖库。所指定的每一个库就称为一个subspec。可用的subspec都列在node_modules/react-native/React.podspec中，基本都是按其功能命名的。一般来说你首先需要添加Core，这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库（即组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。6.2 Podfile在React和React Native模块成功安装到node_modules目录之后，你就可以开始创建Podfile以便选择所需的组件安装到应用中。创建Podfile的最简单的方式就是在iOS原生代码所在的目录中使用CocoaPods的init命令：(在Xcode项目目录中)$ pod init或者$ touch PodfilePodfile会创建在执行命令的目录中。你需要调整其内容以满足你的植入需求。下面是我调整后的Podfile的内容【这块有坑，出现和解决】：# target的名字一般与你的项目名字相同 platform :ios, '9.0' target 'NumberTileGame' do # 'node_modules'目录一般位于根目录中 # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path` pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'RCTText', 'RCTNetwork', 'RCTWebSocket', # 这个模块是用于调试功能的 # 在这里继续添加你所需要的模块 ] # 如果你的RN版本 >= 0.42.0，请加入下面这行 pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga" end6.3 安装PodPodfile写完了，现在就可以安装React Native的Pod包了：$ pod install然后你应该可以看到类似下面的输出(译注：同样由于众所周知的网络原因，pod install的过程在国内非常不顺利，请自行配备稳定的FQ工具，或是尝试一些镜像源)：Analyzing dependencies Fetching podspec for `React` from `../node_modules/react-native` Downloading dependencies Installing React (0.26.0) Generating Pods project Integrating client project Sending stats Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.7. 代码集成现在我们已经准备好了所有依赖，可以开始着手修改原生代码来把React Native真正植入到应用中了。在我们的2048示例中，首先尝试添加一个显示有"High Score"（得分排行榜）的React Native页面。React Native组件我们首先要写的是"High Score"（得分排行榜）的JavaScript端的代码。创建一个index.ios.js文件首先创建一个空的index.ios.js文件。一般来说我们把它放置在项目根目录下。index.ios.js是React Native应用在iOS上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行require/import导入语句。本教程中为了简单示范，把全部的代码都写到了index.ios.js里（当然实际开发中我们并不推荐这样做）。在项目根目录执行以下命令创建文件： $ touch index.ios.js添加你自己的React Native代码在index.ios.js中添加你自己的组件。这里我们只是简单的添加一个组件，然后用一个带有样式的组件把它包起来。'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class RNHighScores extends React.Component { render { var contents = this.props["scores"].map( score =>{score.name}:{score.value}{"\n"}); return (2048 High Scores!
{contents}); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, highScoresTitle: { fontSize: 20, textAlign: 'center', margin: 10, }, scores: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); // 整体js模块的名称 AppRegistry.registerComponent('RNHighScores', => RNHighScores);RNHighScores是整体js模块（即你所有的js代码）的名称。你在iOS原生代码中添加React Native视图时会用到这个名称。8.集成RCTRootView现在我们已经在index.ios.js中创建了React Native组件，下一步就是把这个组件添加给一个新的或已有的ViewController。简单起见：直接通过项目StoryBoard来创建一个按钮，并添加点击事件到ViewController了中。9.事件处理首先导入RCTRootView的头文件。#import【这块和中文网上有出入，中文网导入有误】这里我们在btn的点击方法中添加如下代码- (IBAction)highScoreButtonPressed:(id)sender { NSLog(@"High Score Button Pressed"); NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation moduleName : @"RNHighScores" initialProperties : @{ @"scores" : @[ @{ @"name" : @"Alex", @"value": @"42" }, @{ @"name" : @"Joel", @"value": @"10" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootV [self presentViewController:vc animated:YES completion:nil]; }10. 调试前准备现在基本的准备工作已经做完了，可以开始准备测试了。修改App Transport Security苹果默认不允许app访问不安全的http连接。这里我们通过在plist文件中添加如下key即可解决NSAppTransportSecurityNSExceptionDomains
NSTemporaryExceptionAllowsInsecureHTTPLoads运行PackagerFrom the root of your project, where the `node_modules` directory is located. $ npm start运行应用如果你使用的是Xcode，那么照常编译和运行应用即可。如果你没有使用Xcode（但是你仍然必须安装Xcode），则可以在命令行中使用以下命令来运行应用：在项目的根目录中执行： $ react-native run-ios运行效果这个小程序中，你运行了之后点击High Score会出现如下页面，表示集成成功了至此，就可以做功能的开发了。本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。飞跃科技百家号最近更新：简介:本人有丰富的综合领域写作经验。作者最新文章相关文章如何在 iOS 设备上运行React Native App_百度知道
如何在 iOS 设备上运行React Native App
我有更好的答案
jsbundle 文件.m更改 URL 中的 IP。如果你刚刚开始了你的项目，main，从 Localhost 改成你的笔记本电脑的 IP在 Xcode 中，选择你的手机作为构建目标：dev(默认的 true)——设置了 __DEV__ 变量的值.m遵循“选项 2”的说明：取消 jsCodeLocation =[[NSBundle mainBundle]…在你应用程序的根目录的终端运行给定 curl 命令Packager 支持几个选项。从设备访问开发服务器你可以使用开发服务器在设备中快速迭代。要做到这一点：晃动设备来打开开发菜单(重载、调试等)使用离线包你也可以将应用程序本身的所有 JavaScript 代码打包。这样你可以在开发服务器没有运行时测试它，并把应用程序提交到到 AppStore。打开 iOS / AppDelegate,右键单击你的项目目录，然后单击“添加文件……”——选择生成的 main，你的笔记本电脑和你的手机必须处于相同的 wifi 网络中。打开 iOS / AppDelegate，它会打开一堆有用的警告。对于产品，它建议使用 dev = false。minify(默认的 false)——只要不通过 UglifyJS 传输 JS 代码。要想添加它。故障排除如果 curl 命令失败，确保 packager 在运行。也尝试在它的结尾添加 ——ipv4 标志，并按“构建和运行”提示如何在 iOS 设备上运行React Native App在设备上运行需要 Apple Developer 账号 ，且需要配置你的 iPhone。本指南仅覆盖 React Native 特定的主题。当是 true 时.jsbundle 可能不会被包含到 Xcode 项目中
学高端技术就来八维教育
主营：教育
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何用 React Native 创建一个iOS APP？
如何用 React Native 创建一个iOS APP？
诚然，React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
诚然，React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。
下面，我们可以尝试用React Native创建一个 iOS APP.
在我们开始之前，我建议：你可以在
里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的 APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建 UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先，我们先来安装相应的工具。React native 是使用
来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。
推荐使用 的方式来安装 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以装好:
brew install node
接下来安装
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端，找到你希望保存的项目文件，然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址 JavaScript 的应用程序。
?终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（我们将看看这个版本）和 JavaScript 代码。运行这个 APP,你可以看到下图中的模拟器，如果你想在开发运行有几个步骤，你应该这样做。欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你创建项目时生成的 index.ios.js 文件，如果您更改 JavaScript 代码，重新加载命令应用程序 Command-R 看到的变化，如果你想要更多的选择，使用命令控制 Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。
在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在 Xcode 中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果你的应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该怎么做。
如果你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware & Keyboard & Connect Hardware Keyboard.
如果你按上边程序做了它依然不能重新加载，那么你可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。
我们现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用 Xcode，但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的 JavaScript IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX 的那真很不错。
当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
'use strict'
以上代码启用了严格的模式，增加了处理原生 JavaScript 代码对错误的改善。
var React = require('react-native');
以上代码可以加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text,
上面是一个解构赋值，你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果你不用它，那么每次你使用一个组件在你代码中时，你就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
&View style={styles.container}&
&Text style={styles.welcome}&
Welcome to React Native!
&Text style={styles.instructions}&
To get started, edit index.ios.js
&Text style={styles.instructions}&
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用 JSX（JavaScript语法扩展）来构建应用程序的 UI。如果您以前使用过 XML（甚至HTML），JSX 就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应，你可以使用纯 JavaScript，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他UI组件。
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的 UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。
（未完待续）
以真实用户体验为度量标准进行 ，监控网络请求及网络错误，提升用户留存。访问 感受更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 。本文转自
用云栖社区APP，舒服~
【云栖快讯】直播推荐——现在报名3月12日编程语言系列讲座，与行业资深专家一起学习Python、C++、JavaScript、Java！还可在活动页面领取红包，百分百中奖哦！&&
阿里云移动APP解决方案，助力开发者轻松应对移动app中随时可能出现的用户数量的爆发式增长、...
移动测试（Mobile Testing）是为广大企业客户和移动开发者提供真机测试服务的云平台...
是一款提供了现场可编程门阵列(FPGA)的计算实例，基于阿里云弹性计算框架，用户可以几分钟内...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效...React-Native 入门指导系列教程目录
二、项目介绍与调试
三、CSS样式与Flex布局
四、常用UI控件的使用
五、JSX在React-Native中的应用
六、事件与数据调用
七、自定义组件
八、动手写实例
九、发布与真机调试
1. 什么是React-Native？
　　React-Native是：Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。
　　React Native的原理是：在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以&View&取代&div&，以&Image&替代&img&等。
2.React-Native有啥优缺点？
　　优点是：能够用JavaScript脚本就可以写出App的界面，对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
和其他的移动Web框架相比：
Native不用WebView，彻底摆脱了WebView让人不爽的交互和性能问题；
Native的原生控件有更好的体验；
Native有更好的手势识别；
Native有更适合的线程模型；
　　缺点是：还在试用阶段，潜在的问题尚不得而知：兼容性问题，性能问题等。还没大量普及，学习资料尚且不多，供爱折腾的朋友尝尝鲜。
3.成功案例有哪些？
　　那么，现在有哪些公司在用这个新出来的技术呢？据了解，有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。
　　天猫iPad客户端&猜你喜欢&业务，支付宝新一代的框架基于React；携程网App部分新业务；去哪儿网给航空公司用的收益辅助系统；百度图片搜索无线的新首页，部分试水；Quip 最好用的在线文档协作工具&&
4.要学些什么？
　　想必，大家已经按耐不住，会发问，使用React-Native开发要学习些什么呢？
Html+CSS+JavaScript的基本功肯定是少不了；
Node.js的基本概念学习。API文档：
JSX: JavaScript语法的一个扩展，类似XML结构。
FLUX: Facebook公司的一个创建用户客户端web程序的框架。
　　好了，废话不多，直入正题吧。
1. 硬件条件
　　你需要一台Mac电脑，或者是安装了OSX系统的电脑，这是iOS App开发的前提。
2. 软件条件
(1). 安装最新版的XCode，建议是XCode7.1及以上版本。（PS: 如果不是最新版，可能在之后新建项目的时候，会编译通不过。小编就是之前没把XCode升级到最新版，然后被一个编译问题困扰了很久。）
(2). 安装HomeBlew（OS系统上的一个安装包管理器，安装后可以方便后续安装包的安装。）
终端命令：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
(3). 安装Node.js （服务端的JavaScript运行环境）
下载地址：
成功安装后，终端会有如下提示信息：
Node.js was installed at: /usr/local/bin/node ?
npm was installed at: /usr/local/bin/npm ?
Make sure that /usr/local/bin is in your $PATH.
(4). 建议安装WatchMan（React修改source文件的一个工具）
终端命令：&
brew install watchman
(5). 安装Flow: 一个JavaScript 的静态类型检查器。
终端命令：
brew install flow
(6). 安装React Native CLI: 用来开发React Native的命令行工具
终端命令：
npm install -g react-native
装好了环境，就可以愉快的玩耍起来了。
创建项目1. 新建一个项目
　　新建一个&HelloWorld&的项目，每个语言的开始教程都是这个，我们也不例外。
操作超级简单，只需终端输入命令行：
react-native init HelloWorld&
2. 运行项目
　　创建的项目包含Andriod和iOS两个版本，我们这边就先介绍iOS的操作。(Andriod的操作也大同小异，无非就是编译的环境不同，js文件中的内容和写法都是通用的。学会了iOS的用法，再研究Andriod下的React-Native开发，会很轻松。)
　　用XCode打开ios/HelloWorld.xcodeproj文件，点击键盘"?-R&或者点击"Run"，编译运行项目。会启动React-Native服务和iOS模拟器。
　　在iOS模拟器中可以看到如图界面：
　　React-Native服务在编写过程中要一直开着，如图：
　　如果不小心把它关了，没关系，可以在终端输入：
来重新开启服务。
　　安装谷歌的Chrome Developer Tools，具体使用方法，在之后的教程中会再具体介绍。
参考文章：
　　好了，看到这里，如果你已经成功配置了React-Native的环境，并且新建并成功运行了第一个程序了。那么，就先恭喜了，我们甚至没有写一行代码，就已经成功运行了第一个React-Native的程序，是不是还挺简单的。正所谓，良好的开端是成功的一半。
　　在接下来的一篇文章中，我会和大家一起来具体看看自动新建项目中包括的内容，以及每个文件中具体写法和作用。
附上facebook官方的教程网站地址，供大家研究学习：
阅读(...) 评论()}