react-native的IOS移动开发体验

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

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

  根据须要咱们能够选择如下的编程语言工具,分别是homebrew,node.JS,watchman,和flow,那么咱们首先来安装homebrew,下面是安装的的操做。咱们经过官网找到homebrew的软件下载。node

  homebrew:react

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

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

  BREW安装节点(node)brewinstall守望(watchman)BREW的安装流程(flow)程序员

    四、当咱们把有可能用到的相关工具弄好以后,那么咱们就要下载安装react-native的源码。npminstall-greact-native-cli/github

  五、果真在建立源代码的时候不是很了解我建议你去官网的教程哪里的实例来建立,而我此次的操做也是官方的实例,经过命令指令创建一个demo工程。web

      AwesomeProject这么一个工程,输入以下命令创建工程:npm

  react-nativeinitAwesomeProject

  反应awesomeproject本地初始化

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

react-native的IOS移动开发体验_react-native_IOS_移动开发_课课家

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

代码库

  八、咱们从代码从看到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,执行没有问题,这就验证了咱们的假设。

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

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

相关文章
相关标签/搜索