[React-Native]React-Native for Android(一):开发环境搭建

前言

React-Native是互联网巨头之一的Facebook开发的一套多平台开发解决方案。可以让我们使用JavaScript和React开发移动端应用。倡导组件化开发理念,即在RN中任一个功能或者一个UI模块都可以做为一个组件,我们可以使用其封装好的组件,也可以通过嵌套形成新的组件。RN着重于让开发者提高多平台的开发效率,即Learn once,write everywhere的思想。
React-Native 经过Facebook将近三年的开发演进,在写本文时最新的版本已经演进到0.52版本,在github上已经有0.53的pre release状态。

React-Native的特点

  • Learn once,Write everywhere
    • 即只需要学习React-Native一种开发方式,就可以开发多个不同平台的App,而且RN的大多数组件也是可以在不同的平台复用的,可以大大的降低了开发成本。
  • JSX和FlexBox布局
    • Facebook 为了代码的可读性和效率,开发出了JSX语法糖,即可以在JavaScript中直接写HTML标签的语法糖。
    • FlexBox可以很方便地用来改善动态或未知大小的元素的对齐,方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区,以最优的方式达到兼容不同屏幕大小。
  • 接近原生应用的性能和体验
    React-Native的机制和PhoneGap和Ionic等机制完全不同,React-Native底层仍是使用原生平台开发的,所以应用的整体体验大大的高于Hybrid App。

React-Native for Android

最初的React-Native只支持iOS开发,直到2015年9月开始,React-Native同时开始支持Android开发。到现在RN已经支持大部分的安卓组件,并且在Android平台已经很成熟了。

  • React-Native for Android 开发环境搭建
    主要讲解一下在Mac下的环境配置。
    • HomeBrew安装
      Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
      运行命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
      如果遇到EACCES: permission denied问题,运行命令:sudo chown -R 此处填PC用户名 /usr/local
      查看用户名命令:whoami
    • Node.js安装
      建议去Node.js的官网下载LTS版本。有些文章可能会推荐通过HomeBrew安装。但是这样的缺点是brew下载的是latest version。为了稳定性考虑还是建议使用LTS版本。当然也可以安装HomeBrew,再安装homebrew-version,指定版本下载。下载安装完成后运行node -v查看一下是否安装成功。
    • yarn
      Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。
      运行命令:npm install -g yarn react-native-cli 安装yarn以及react-native cli工具
      如果遇到EACCES: permission denied问题,运行命令:sudo chown -R 此处填PC用户名 /usr/local
    • JDK安装
      Oracle官网下载jdk工具,按照提示安装。安装完成后运行 javacjava --version查看是否安装成功。
    • AndroidStudio安装
      Android Developer官网下载AS最新版。需要通过科学上网工具。如果没有科学上网工具,可以去Android dev tool 下载。
      下载完成后,需要进行ANDROID_HOME配置。如果你使用的是Mac原生的terminal,运行vi ~/.bash_profile 打开bash配置文件,在英文输入法环境下按i进入编辑模式,输入export ANDROID_HOME=~/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools,将Android sdk和adb工具配置入环境变量。按esc退出编辑模式,再输入:wq进行保存退出。然后通过source ~/.bash_profile使配置生效。如果使使用别的终端工具比如zsh,则要在~/.zshrc下进行编辑。具体不同的终端可自行查询资料。
    • 安装WatchMan
      Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。虽然此工具官方说是推荐安装,但是我还是推荐必须安装。
    • React Developer Tools
      在开发中我们需要在Google Chrome中远程调试React-Native JS代码,在Google Chrome浏览器的应用商店中搜索React Developer Tools并安装。此处应使用科学上网工具。

安装第一个项目

通过以下命令安装第一个Demo项目:
react-native init Demo
cd Demo
react-native run-android
当然也可以通过--version命令指定React-Native版本号:
react-native init Demo --version 0.39.2
注意必须精确到小数点后两位。

修改项目

打开App.js并随便改上几行,按两下R键打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到应用的日志。

至此React-Native for Android 环境配置搭建完成,下一期我们将讲解一下React-Native项目的开发IDE工具。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,387评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,845评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,091评论 0 246
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,308评论 0 214
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,662评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,795评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,008评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,743评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,466评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,687评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,181评论 1 262
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,531评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,177评论 3 239
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,126评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,902评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,862评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,734评论 2 274

推荐阅读更多精彩内容