环境配置:React Native 开发环境配置 For Android

React Native 是FaceBook开源的一个项目,FaceBook希望可以用写 Web App 的方式去写 Native App。它可以让我们用JS和React来开发应用,使用React Native可以通吃Android 和 IOS,以及Web,仅仅需要一份业务逻辑代码就可以来创建我们的应用。

起源

React Native 是由 React 衍生出来的,而 React 起源于 Facebook 的内部项目,因为FaceBook对市场上所有 JavaScript MVC 框架,都不太满意,就决定自己写一套,用来架设自己的 Instagram 的网站。等做出来以后,发现这套东西很不错,而且好用,就在2013年5月开源了。

而衍生的 React Native 项目,希望用写 Web App 的方式去写 Native App。这样同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机上。FaceBook最早发布的关于React Native是针对IOS的,而React Native for Android是在去年也就是2015年9月15日开源发布的。现阶段React Native的体验虽然已经很不错了,只能说很接近原生应用,但是还是不能达到Native App的体验。所以它很火,将来的事,我们将来说,但是目前已经非常火了,多门技术,多条路。我们也应该学学了。

环境搭建

因为我用的是macbook,所以这次环境搭建是根据mac电脑来说的,不过大家放心,针对windows电脑的环境搭建,我会分享给大家一篇文章或者视频的,不会忘了你们的。

Homebrew安装

Homebrew是一款自由及开放源代码的软件包管理系统,用以简化Mac OS X系统上的软件安装过程,Homebrew以Ruby语言写成,针对于Mac OS X操作系统自带Ruby的版本。认安装在/usr/local,由一个核心git版本库构成,以使用户能更新Homebrew。是 OS X 不可或缺的套件管理器。
安装之前,你可以先检查一下电脑上是否已经安装了Homebrew,检查方式如下:
在终端执行下列命令:

brew -v

如果已经安装了,就像下图一样,显示版本号。

如果没有安装,那就可以用下面这种方式,进行安装,在终端上直接输入下面的命令即可:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.js的安装

Node.js®是一个基于Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。我们都知道React Native是需要使用js开发的,所以Node.js是必不可少的安装。

安装Node.js也很简单,如下:

nvm install node && nvm alias default node

可能你发现了,在Terminal终端上使用的命令是nvm,如果你没有安装nvm是会提示command not found的,所以我们还得先安装nvm。
nvm 是 Node.js 的版本管理器,可以轻松安装各个版本的 Node.js 版本。安装方式如下:
我们可以通过Homebrew安装:

brew install nvm

或者通过这里的方式安装,地址:https://github.com/creationix/nvm#installation

安装完了nvm,我们这里最好配置一下环境变量到.bash_profile文件,因为如果不配置的话,容易出现这个错误nvm command not found
配置方式如下:

export NVM_DIR="/Users/loonggg/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

检查是否安装好了node和nvm我们可以通过如下方式:

bogon:~ loonggg$ node -v
v5.10.1
bogon:~ loonggg$ npm -v
3.8.3

安装watchman 和 flow

  • Watchman 是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。
  • flow是一个Javascript静态类型检查器。Flow为Javascript添加了静态类型检查,以提高开发效率和代码质量。

安装方式如下:

brew install watchman
brew install flow

安装React Native

我们使用npm进行安装,如下:

npm install -g react-native-cli

安装完React Native之后,要想运行或者初始化一个项目,然后运行到模拟器或者真机,我们需要搭建一个Android或者ios开发环境,我这里只介绍android,相信想学习React Native的同学,电脑上都基本上有了Android的开发环境。但是可能会有坑,有一个大坑就是得配置SDK的环境变量:ANDROID_HOME。

SDK环境变量的配置

  1. 启动Terminal终端工具
  2. 输入cd ~/ 进入当前用户的home目录
  3. 创建:
touch .bash_profile
  1. 打开并编辑:
open .bash_profile
  1. 文件中写入以下内容:export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools
    友情提示:上述路径,请换成自己电脑上的SDK所在路径
  2. 执行如下命令:
source .bash_profile
  1. 验证:输入adb回车。如果未显示command not found,说明此命令有效,环境便亮设置完成。

创建我们的第一个React Native应用

初始化项目

react-native init AwesomeProject

上面的AwesomeProject这个项目名字,你可以自己随意定义,自己命名,没有限制。

运行项目

  • 切换到AwesomeProject的主目录
  • 运行项目命令
react-native run-android
  • 我们使用编辑器打开和修改index.android.js文件,调出模拟器菜单键,选择重新载入 js 即可看到变化。
    启动后,模拟器效果图:

到这里我们就把环境配置讲完了,关于windows上的安装,我会给大家发篇资料或者视频的。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom