美文网首页
ReactNative系列(一):简介及环境搭建

ReactNative系列(一):简介及环境搭建

作者: 猿海一粟 | 来源:发表于2019-02-11 18:47 被阅读0次
    ReactNative.jpg

    前言:

      最近半年多因为项目需要和自己的兴趣,由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
    

       运行图就不在这里展示了,希望可以帮到大家,如果觉得有帮助,可以点赞关注,有不对或者不够完善的地方指出来一起讨论,谢谢~~!!

    相关文章

      网友评论

          本文标题:ReactNative系列(一):简介及环境搭建

          本文链接:https://www.haomeiwen.com/subject/rgdksqtx.html