iOS React Native实践系列一

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。

React Native for Android

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android, 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。

React Native支持iOS7.0及以上

React Native需要 Xcode 6.3 或者更高的版本。 可以在 App 应用商店里面安装它。

本文基于React Native v0.16.0-rc (2015-11-26)

文档资料来源

http://facebook.github.io/react-native/docs/getting-started.html(官方英文文档)

http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html  (中文文档)

开始在mac上部署react native

1、安装Homebrew,在mac打开终端工具

Launchpad-终端

在终端运行 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

可参考这篇博文  http://www.cnblogs.com/lzrabbit/p/4032515.html

2、安装nvm

在终端运行命令  brew install nvm

安装完成后需要新建文件  ~/.bashrc~/.profile, 或者 ~/.zshrc

然后输入以下内容保存,将"$HOME/.nvm"替换为对应的目录,可以用echo source $(brew --prefix nvm)查看

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

时间: 2024-11-04 23:44:00

iOS React Native实践系列一的相关文章

菜鸟窝React Native 视频系列教程

菜鸟窝React Native 视频系列教程 交流QQ群:576089067 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU,后负责蜂鸟众包Android端,期间引入react-native技术,作为国内react-native 与 Android混合开发的早期商业项目,具有一定经验,同时也是react-native开源项目reading(https://github.com/attentiveness/reading)

慢牛系列三:React Native实践

上次发布了我的慢牛股票APP之后,有园友反馈有点卡,这个APP是基于Sencha Touch + Cordova开发的,Sencha本身是一个比较重的框架,在Chrome里运行性能还是不错的,但是在Android的WebView里,性能受限于机器的配置,在我的小米2s里表现还行,在小米4s里开起来比较流畅,但是Android机型相比IOS太多样了,Sencha Touch在iOS里表现不错,不过我还没编译iOS版本. 后来我又试着用了下Ionic框架,基于AngularJs开发,这个框架要轻量,

React Native插件系列之插件汇总

1.背景 因为自己的几个APP都是用React Native做的,感觉到React Native的写APP效率真的很高,在NPM上搜索了一些插件,发现React Native的生态圈现在真的很大.绝对可以满足现在很多APP的需求,而不止企业类的APP了. 2.插件汇总(一直在整理中...) react-native-linear-gradient 颜色渐变处理 react-native-login 视频界面登录 react-native-keyboard-aware-scroll-view 键盘

React Native实践之携程Moles框架

编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将通过对Moles框架的分享,介绍携程在React Native方面的实战干货,希望给大家一些灵感和启发.

【稀饭】react native 实战系列教程之影片数据获取并解析

获取网络数据 在上一节,我们已经通过模拟数据,并将UI展示出来.这节我们将获取网络数据.数据来源于网络,仅用于学习使用. fetch介绍 fetch是react native的一个网络请求库,使用该库不用引入模块,可以直接使用.一个简单的请求如下: fetch('http://facebook.github.io/react-native/movies.json') 发起请求之后,我们还需要对它的响应进行处理,只要这样 fetch('http://facebook.github.io/react

后盾 React Native 开发系列视频课程

01 初识react native.mp402 react native优点.mp403 APP开发方式横向对比.mp404 需要的知识储备和学习难点.mp405 ATOM(阿童木)编辑器插件安装.mp406 ATOM插件安装及答疑.mp407 java sdk和NodeJS环境安装.mp408 Android SDK安装.mp409 环境变量的配置方法.mp410 使用npm初始化项目 npm cnpm yarn命令介绍.mp411 使用yarn命令初始化项目.mp412 react nati

iOS阅读器实践系列(一)coretext纯文本排版基础

前言:之前做了公司阅读类的App,最近有时间来写一下阅读部分的实现过程,供梳理逻辑,计划会写一个系列希望能涉及到尽量多的方面与细节,欢迎大家交流.吐槽.拍砖,共同进步. 阅读的排版用的是coretext,这篇介绍用coretext实现基本的排版功能. 关于coretext的实现原理,可以查看文档或其他资料,这里就不介绍了,只介绍如何应用coretext来实现一个简单的文本排版功能. 因为coretext是离屏排版的,即在将内容渲染到屏幕之前,内容的排版工作的已经完成了. 排版过程大致过程分为 步

iOS阅读器实践系列(四)阅读视图方案

阅读过程中文章内容可能需要很多屏才能展示完,那么现在的问题是创建多少个视图来渲染内容. 经过考虑,决定用两个视图,利用手势来控制不断来回切换来实现. 首先定义两个私有的实体的view对象: @property (nonatomic, strong) DisplyManagerView *buffer1; @property (nonatomic, strong) DisplyManagerView *buffer2; buffer1与buffer2就是用于渲染内容的两个视图. 其次还要定义一个用

iOS阅读器实践系列(三)图文混排

本篇介绍coretext中的图文混排,这里暂用静态的内容,即在文本中某一固定位置插入图片,而不是插入位置是根据文本内容动态插入的(要实现这一效果需要写一个文本解析器,将原信息内容解析为某些特定格式的结构来标示出特定的类型(比如文字.图片.链接等),然后按照其结构中的属性配置,生成属性字符串,之后渲染到视图中). 这部分的思路参考唐巧大神的blog. 在第一篇介绍过coretext是离屏渲染的,即在将内容渲染到屏幕上之前,coretext已完成排版工作.coretext排版的第一步是组织数据,即由