内容简介:最近需要开发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 内核环境
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
从0开始做运营 入门篇
张亮 / 4.99元
此书是《从零开始做运营》系列的入门篇。 在互联网产品经理热的今天,关于传统的网站与产品运营的书籍一直非常缺乏,很多有志于互联网行业的年轻人并不明白一款产品、一个网站的策划、上线、成长、成熟直到衰落的过程中,除了产品和网站本身的设计之外,还有一块非常重要的工作是针对网站与产品生命周期的持续运营。 网站与产品运营是一个非常辛苦而非常有趣的事情,希望本书可以为有志于从事互联网网站与产品运营的......一起来看看 《从0开始做运营 入门篇》 这本书的介绍吧!