内容简介:最近需要开发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环境的搭建。
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
P.S. 如果希望修改代码后实时刷新界面,按下command + M,选择“Enable Hot Reloading”。
6.用VSCode调试运行
可以用Visual Studio Code调试运行ReactNative程序。
首先在“扩展面板”中安装ReactNative Tools插件:
然后用VSCode打开刚刚创建的项目的文件夹,进入“调试面板”,点击绿箭头旁边的下拉框,选择“添加配置”,就会自动在launch.json中增加4项配置:
这步完成以后,就可以愉快地打断点调试app了~
参考:
http://www.ituring.com.cn/book/tupubarticle/17983
https://reactnative.cn/docs/getting-started.html
更多文章欢迎关注“鑫鑫点灯”专栏: https://blog.csdn.net/turkeycock
或关注飞久微信公众号:以上所述就是小编给大家介绍的《ReactNative开发环境搭建》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Hyperledger Fabric环境搭建及环境测试(Mac环境)
- CV 环境很重要,各种环境搭建大全
- Openstack Queens 环境搭建(一)环境准备
- Python 环境搭建
- 1 - 搭建开发环境
- 搭建 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开发学习指南(第二版)》 这本书的介绍吧!