前言:
最近半年多因为项目需要和自己的兴趣,由Android转向ReactNative,从零到一的开始学习,前后经历了两个项目,也算有自己的一份理解和心得!正好最近有空闲时间,所以试着由浅入深整理分享出来,一是为了记录分享;二是为了回顾整理,提升自己!
ReactNative整理:《ReactNative系列》
一、ReactNative基本知识
1. 简介(什么是ReactNative?)
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,用同一套JS代码,可以分别在Android和iOS两个平台上达到相同的运行效果。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)。
2. RN的优缺点
优点:
- 跨平台兼容性
对于RN而言,同一套代码可以同时部署于Android和iOS两个不同操作系统,并且呈现出相同的运行效果。对于很多公司来说,RN可以节约许多开发成本,本来需要Android和iOS两个人的开发量,现在一个人就可以完成,也为程序员腾出更多时间做别的任务; - 学习成本低
由于RN用的是React框架,有前端开发经验的会降低很大一部分学习成本,有事半功倍的效果。当然,对于做原生开发的同学,相对会麻烦,毕竟是新的语言技术栈。 - 便于调试
不需要频繁编译,只需要Reload或者HotReload就可以。修改过的JS代码重新装载就能看到修改后的效果,用Chrome浏览器调试,可以打断点Debug,也可以打印日志。 - 打包热更新
更新APP版本只需要替换JSBundle就可以,避免了频繁发版,审核等繁琐步骤。
缺点:
- 性能上的缺陷
业务场景或数据处理相对少的情况下,性能与原生差异较小;但如果业务场景比较复杂,数据处理比较多的时候,性能、体验上要比原生差,能明显感知到卡顿,不够流畅。 - 特殊问题处理
因为一套代码运行在两个不同平台,总会遇到一些问题是某个平台特有的,需要特殊处理,所以需要对两个平台有一定程度的认知。 - 未成熟的框架
虽然RN有诸多优点,但到现在为止还没有个相对稳定的成熟版本,所以开发中会遇到许多坑,需要逐一踩过填平才行。
3. React相关
ReactNative是基于React框架而设计,因此需要对React有一定了解,下面提供几个React相关链接:
官方文档:React中文官方文档
阮一峰博客:React文档-阮一峰
官方Git地址:React官方地址-Git
二、ReactNative搭建开发环境
注:因为公司配备的是MacPro,所以开发用的工具都是基于macOS的。
先推荐下RN的官方文档,里面有学习过程中所需要的绝大多数知识和问题的解决办法: https://reactnative.cn/docs/getting-started/
1. 安装 Homebrew
Homebrew是一款MacOS缺失的软件包管理器,使用它能安装Apple没有预装,但你需要的东西。将以下命令粘贴至终端即可安装:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
看到网上很多同学说,安装会遇到/usr/local/
目录不可读写的情况,可以用下面命令修复:
sudo chown -R 'whoami' /usr/local
2. 安装 Node.js
使用 Homebrew 来安装,命令行中执行如下命令:
brew install node
3. 安装 Watchman
Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能。
brew install watchman
4. 安装 Yarn、ReactNative命令行工具(react-native-cli
)
Yarn 是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
完成Yarn安装之后,就可以用yarn
代替npm install
命令,用yarn add 第三方库名称
代替npm install 第三方库名称
5. 安装AndroidStudio或者Xcode
- Xcode需要安装9.4或者更高版本。可以通过 App Store 或是到Apple 开发者官网上下载。
- Android开发环境搭建
(1)ReactNative需要JDK,可以到JDK官网下载安装。
(2)安装 AndroidStudio 以及 Android SDK(具体操作就不详细说明了,可以查询上述ReactNative官方文档,或者Android开发环境搭建)。
(3)主要解释下配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。
具体的做法是把下面的命令加入到~/.bash_profile
文件中:
注:~表示用户目录,即
/Users/你的用户名/
,而小数点开头的文件在 Finder 中是隐藏的,并且这个文件有可能并不存在。可在终端下使用vi ~/.bash_profile
命令创建或编辑。
另外:如果不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
步骤:
1、终端输入 vi ~/.bash_profile
;
2、按字母键 “i”,进入文件编辑模式,输入以下命令(以各自实际位置为准):
export ANDROID_HOME=$HOME/Library/Android/sdk
3、保存输入,并退出;
4、执行source $HOME/.bash_profile
命令来使环境变量设置立即生效,否则需要重启电脑才会生效。
5、终端输入echo $ANDROID_HOME
命令,检验配置是否成功。
至此,ReactNative需要的开发环境搭建完成,可以尝试创建新项目运行。
创建新项目
可以使用ReactNative命令行工具创建工程,例如:工程命名为RNDemo。
react-native init RNDemo
注:你可以使用
--version
参数,创建指定版本的项目。例如react-native init RNDemo --version 0.44.3
。
如果想在Android或者iOS运行项目,可用如下命令:
react-native run-android
react-native run-ios
运行图就不在这里展示了,希望可以帮到大家,如果觉得有帮助,可以点赞关注,有不对或者不够完善的地方指出来一起讨论,谢谢~~!!
网友评论