ReactNative开发环境搭建

栏目: 服务器 · 发布时间: 5年前

内容简介:最近需要开发dApp前端,开始学习ReactNative。首先捋清爽3个概念:React,React.js,ReactNative。首先需要安装node.js,另外为了加速node模块下载建议配置npm淘宝镜像:

最近需要开发dApp前端,开始学习ReactNative。

首先捋清爽3个概念:React,React.js,ReactNative。

React是一套基础框架设计,而React.js和ReactNative则是该框架的两个实现版本(不过,由于历史原因,React框架的基本概念和设计思想大多包含在React.js的相关文档中)。其中React.js面向Web应用开发,而ReactNative则面向移动应用开发。从表面看,它俩的主要区别是要把React.js中的Web组件(比如div/span)替换成Native 组件(比如View/Text)。从实现层次来看,React.js是通过计算虚拟DOM和实际DOM之间的diff,实现高效渲染,而ReactNative则是通过桥接Javascript和Native层API(Java/ObjectC),实现了业务逻辑和UI渲染的分离,从而获得原生app的性能体验。下图解释了ReactNative界面事件响应的实际流程:

ReactNative开发环境搭建

万事开头难,这篇首先介绍下ReactNative环境的搭建。

1.安装ReactNative依赖

首先需要安装node.js,另外为了加速node模块下载建议配置npm淘宝镜像:

brew install node
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

然后安装watchman,是一个用来监视文件内容变化的工具(方便实时刷新界面):

brew install watchman

最后安装yarn和react-native-cli,前者是Facebook开发的用来替代npm的包管理工具,后者则是ReactNative的命令行工具,用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

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

2.配置Android SDK路径

运行项目时需要用到adb和emulator,因此需要把它们包含在PATH中(注意:不要使用tools目录中的emulator)。

以mac为例,在~/.bash_profile中加上下面这两句:

export ANDROID_HOME="/Users/macbook/Library/Android/sdk"
export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH"

然后执行 source ~/.bash_profile 使新配置生效。

3.创建新项目

给你的新项目取个名字,比如Artemis:

react-native init Artemis

4.启动Android模拟器

首先要创建一个虚拟设备(AVD),最简单的方式是在AndroidStudio中通过Tools -> Android -> AVD manager启动管理器界面,然后创建新设备。比如我创建了一个Nexus 5X的AVD,取名为nexus5X,然后通过命令行启动模拟器:

emulator @nexus5X

5.运行项目

通过下面的命令运行刚刚创建的新项目:

react-native run-android

ReactNative开发环境搭建 P.S. 如果希望修改代码后实时刷新界面,按下command + M,选择“Enable Hot Reloading”。

6.用VSCode调试运行

可以用Visual Studio Code调试运行ReactNative程序。

首先在“扩展面板”中安装ReactNative Tools插件:

ReactNative开发环境搭建

然后用VSCode打开刚刚创建的项目的文件夹,进入“调试面板”,点击绿箭头旁边的下拉框,选择“添加配置”,就会自动在launch.json中增加4项配置:

ReactNative开发环境搭建

这步完成以后,就可以愉快地打断点调试app了~

参考:

http://www.ituring.com.cn/book/tupubarticle/17983

https://reactnative.cn/docs/getting-started.html

更多文章欢迎关注“鑫鑫点灯”专栏: https://blog.csdn.net/turkeycock

或关注飞久微信公众号: ReactNative开发环境搭建

以上所述就是小编给大家介绍的《ReactNative开发环境搭建》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java和Android开发学习指南(第二版)

Java和Android开发学习指南(第二版)

Budi Kurniawan / 李强 / 人民邮电出版社 / 2016-3 / 69.00元

本书是Java语言学习指南,特别针对使用Java进行Android应用程序开发展开了详细介绍。 全书共50章,分为两大部分。第1部分(第1章到第22章)主要介绍Java语言基础知识及其功能特性。第2部分(第23章到第50章)主要介绍如何有效地构建Android应用程序。 本书适合任何想要学习Java语言的读者阅读,特别适合想要成为Android应用程序开发人员的读者学习参考。一起来看看 《Java和Android开发学习指南(第二版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具