LZ-Says:抬头望明月,低头思故乡。百感交集。
前言
最近,好忙。
忙碌的背后,是当年欠下的技术债找上门了。
幸好,慢慢的进入了状态,加油~!
据说后期的项目会涉及到 React Native,今天在等待导入依赖的期间,简单配置了一波,特此做个记录。
React Native 开搞~
开搞之前,我们简单了解一下什么是 React Natice?
一、React Native 简述
React Native 是 Facebook 在 React.js Conf 2015 大会上推出的基于 JavaScript 的开源框架。
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
且 React Native 有句很牛掰的标语:
Learn once, write anywhere
简单来说,跨平台,你会这个,LZ 预估就能直接一份代码搞 Android 和 iOS,其次嘛,Facebook 已经在多项产品中使用了 React Native,Enmmm,暂时没啥可担心的。
二、了解下有关 React Native 优/劣势
学习一个东西,首先要明确目标,其次得了解它的优势以及劣势,那么 React Native 具有哪儿些优/劣势又是什么呢?
优势:
- 组件化开发,复用率高,而且目前组件日渐完善,隶属于前端式开发;
- 同时支持 Android 和 iOS 俩大平台,Learn once,write anywhere,野心勃勃哦;
- 强大的热更新;
- 可以和原生页面互相调用,作为一部分嵌入到一个已有的原生 app 中,也就是传说中混合开发;
- 。。。
劣势:
- 支持的组件不全面,虽然还在日渐完善;
- 程序的性能,据说在配置低端机上会有明显卡顿情况;
- 涉及到底层的东西需要在 iOS 和 Android 单独开发,然后在 JS 层进行调用;
- 学习成本高。要学习 JavaScript 系列东西,还需要涉及到 iOS,Android 开发相关知识;
- 。。。
以上综合于网络,如有不对,请指正。
三、配置基本环境
首先要明确俩点:
-
必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 JDK 和 Andriod Studio。
-
虽然你可以使用任何编辑器来开发应用(编写 JS 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。
由于推荐使用 Homebrew 来安装 Node 和 Watchman,那么我们第一步就是去安装这个小家伙。
Step 1:安装 Homebrew
Homebrew 可以安装 Apple 没有预装但我们需要的东西,可以理解为它就是一个载体,通过它去获取我们需要的工具。
官方地址如下:
将以下命令复制到终端:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
脚本会在执行前暂停,并说明将它将做什么。
如下图所示:
期间会让你键入密码,之后开始下载:
完成后,会为我们输出提示:
Step 2:安装 Node
Node 是一个 JS 运行时环境。简单来说就是可以解析、执行 JS 代码。
终端输入如下:
brew install node
如下图所示:
接着,检查其版本是否在 v8.3 以上:
bogon:~ heliquan$ node --version
v10.10.0
Step 3:安装 Watchman
Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。
在终端键入以下命令:
brew install watchman
如下图所示:
Step 4:建议设置 npm 镜像以加速后面的过程
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Step 5:Yarn 安装以及设置镜像地址
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
键入以下命令行:
npm install -g yarn react-native-cli
设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Step 6:JDK 版本检查
这里需要注意的是:
React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本)。
键入以下命令查看:
bogon:~ heliquan$ javac -version
javac 1.8.0_181
Step 7:Android Studio 方面
此处直接省略安装以及配置步骤。
这里列举出几个需要注意的细节:
-
Android SDK Build-Tools 选项中,确保选中了 React Native 所必须的 26.0.3 版本;
-
配置 ANDROID_HOME 环境变量:
使用 source $HOME/.bash_profile 命令来使环境变量设置立即生效(否则重启后才生效)。可以使用 echo $ANDROID_HOME 检查此变量是否已正确设置
四、老规矩,输出 Hello World
LZ 感觉很湿高大上啊,不懂者无畏,一起继续~
Step 1:创建 React Native 项目
命令行键入以下:
react-native init 项目名称
完成之后,如下所示:
提示:
当然也可以使用 --version 参数创建指定版本的项目。例如 react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。
Step 2:编译并运行 React Native 应用
前提需要保证当前已有设备处于连接状态,查看命令如下:
通过 cd 命令进入到项目目录地址中,接着开启 npm:
cd 项目名称(地址)
npm start
操作如下图:
接着键入 react-native run-android,详情如下:
react-native run-android
如下操作图:
而此时手机端则显示一个链接 local 样式,由于 LZ 好奇中,忘记截图咯。
运行完成后,如下图:
那么接着随便找个编辑器,修改内容,之后摇动手机,弹出如下提示:
选择第一项,查看效果:
手机已显示我们最新修改~
首战,到此结束~
个人公众号
不定期发布博文,最近有点忙,感谢老铁理解,欢迎关注~
参考资料
- 官方 GitHub 地址:https://github.com/facebook/react-native;
- React Native 中文网:https://reactnative.cn/;
- React Native 指南:https://github.com/reactnativecn/react-native-guide;