react-native的IOS移动开发体验

2019独角兽企业重金招聘Python工程师标准>>>

ReactNative结合了Web应用和Native应用的优势，可以使用javaScript来开发iOS和Android原生应用。在Javascript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染等。ReactNative使你能够使用基于JavaScript和React一致的开发体验在本地平台上构建世界一流的应用程序体验。

　　目前来说只有IOS的版本，而是用于Java的Android我们还要在等待，那么为了方便我们体验首先我们要有一个苹果端的OSX系统和安装xcode。

　　根据需要我们可以选择以下的编程语言工具，分别是homebrew，node.JS，watchman，和flow，那么我们首先来安装homebrew，下面是安装的的操作。我们通过官网找到homebrew的软件下载。

　　homebrew:

　　ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

　　当我们顺利的安装了homebrew后我们接着安装相应的应用工具node.JS，watchman，和flow。在homebrew的界面中输入这样的指令。

　　BREW安装节点（node）brewinstall守望（watchman）BREW的安装流程（flow）

　   4、当我们把有可能用到的相关工具弄好之后，那么我们就要下载安装react-native的源码。npminstall-greact-native-cli/

　　5、果然在创建源代码的时候不是很了解我建议你去官网的教程哪里的实例来创建，而我这次的操作也是官方的实例，通过命令指令建立一个demo工程。

      AwesomeProject这么一个工程,输入如下命令建立工程:

　　react-nativeinitAwesomeProject

　　反应awesomeproject本地初始化

　　6、然后我们进入了react-native的界面在里面打开一个xcode的awesomeproject-awesomeproject.xcodeproj运行cammad+r这样我们就能把一个APP的效果通过模拟器模拟出来了。

　　7、当上面的操作完成后你会看到有一个写满了窗口的代码弹窗的出现，我们确认后等待下一步操作。

　　8、我们从代码从看到index.JS.IOS，通过node.JS的终端我们进行一个调试发现如果你修改了index.ios.js的代码，然后在xcode里执行cmd+r，xcode会从8081端口拉取最新的代码执行，并且更新模拟器相应修改。

　　以下是index.IOS.JS的代码结构图。

　　苹果代码的入口都是通过Appdelegate.m形式进行入口打开，代码如下：

　　jscodelocation=[NSURLurlwithstring：@“HTTP：//本地：8081/指标。iOS。捆绑”]；

　　从字面理解，我们应该知道react-native是从本地端口拉取index.ios.js来执行一下了。为了验证是否是这样，我们改一下index.ios.js的名字为test.ios.js，然后在Appdelegate.m里把index.ios.bundle改成test.ios.bundle,重新cmd+r，执行没有问题，这就验证了我们的假设。

　　9、我们再来看看index.JS的内容看看他的写法是怎么样的，大概的了解我们可以去Facebook的官网上了解，因为这里的介绍只是一个附加而用不上。同样的这套代码其实也应用于web和Android，目的是为了减少native的APP开发难度，能够适合程序员的工作，只是Android的版本我们还有待期待。

　　总结：ReactNative把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Reactnative充分利用了Facebook的现有轮子，是一个很优秀的集成作品，并且我相信这个团队对前端的了解很深刻。这是一个科技进步的步伐我们一定要慢慢去适应它。

转载于:https://my.oschina.net/u/3197358/blog/1031171