Facebook在React.js Conf 2015大会上推出了React Native,想必各位从事app开发的都备受关注,有人说2016年React Native很可能会成为最受欢迎的的开源技术之一。姑且不论这项技术能不能火起来,对于程序猿来说,写一套代码能够适配两个平台也是大家一直希望的,随着技术的不断成熟,这个趋势是必然的。
首先我们谈谈Hybird、React Native、Native三者的区别。
1.Hybird是半原生半web的混合类app,app使用web的形式加载内容,比如新闻类的应用很多采用的是这种方式。Hybird对于移动端的开发相对简单,但是体验方面没有原生的好。
2.React Native具有原生应用的用户体验,一份代码可以跨平台运行,在android和iOS都可以执行,所谓“Learn once, write anywhere”。此外门槛不高,web前端的开发人员可以轻松转型,而原来从事android和iOS开发的也能很快上手。
3.Native的体验不用多说,自然是最好的,而且像一些复杂的效果也只有它能做的到,比如socket文件传输,复杂动画等。
随着React Native的不断发展,相信Native能做到的React Native也一样能做到,因为React Native本身就是JS与移动端原生接口的交互过程,只要公共的组建多了,也很方便。所以强烈建议大家有时间可以了解一下,学习一些新的技术,对于自己的视野开阔是很有帮助的。下面根据自己的实践,向大家介绍一下如何使用React Native。
以OS系统为例,在mac上给大家做演示:
1.环境安装与配置:
(1)安装Node.js,首先确保你安装了homebrew,执行brew install node
(2)安装Watchman和Flow,brew install watchman;brew install flow,
以上是基础的环境准备工作,如果想运行在iOS上,只需要安装xcode即可,如果还想在android系统上运行,则需要以下几步:
(1)安装git,xcode默认已经安装,如果没有安装请执行brew install git
(2)安装jdk,在oracle上下载dmg格式的安装即可
(3)安装Android SDK,brew install android-sdk。
(4)配置环境变量:sudo vi ~/.bashrc,编辑.bashrc文件,export ANDROID_HOME=/usr/local/opt/android-sdk,保存。
(5)命令行输入android,打开SDK Manager,下载sdk以及模拟器。
(6)创建Android模拟器,运行android avd弹出模拟器设置页面,根据需要创建自己的模拟器。
至此,环境搭建大功告成,在这个工程中,有可能会出现一些问题,遇到的问题网上一般都有解决办法。接下来,我们创建工程,并使工程跑起来。
由于国内网络,你懂得,所以将npm设置下镜像,npm config set registry https://registry.npm.taobao.org;npm config set disturl https://npm.taobao.org/dist。
然后我们创建工程:首先初始化npm install -g react-native-cli,然后创建工程react-native init TestProject。
如果想TestProject运行在iOS系统上,cd TestProject,也就是在TestProject目录下进入ios目录,打开工程文件TestProject.xcodeproj,运行即可。
如果想在android上运行,cd TestProject,执行react-native run-android(运行前创建好模拟器),android工程也启动了。
大家在练习的过程中有任何问题,可以给我留言或者加我微信: