RN学习笔记01:概述、特点与环境搭建
RN学习笔记01:概述、特点与环境搭建
一、RN概述
React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率——仅需学习一次,编写任何平台。(Learn Once, Write Anywhere) Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
1、RN官网
https://reactnative.com/
2、RN中文网
https://reactnative.cn/
单击【搭建环境】按钮:
3、推荐书籍
- React Native应用开发实例解析.pdf
- React设计模式与最佳实践.pdf
二、RN特点
1、使用JavaScript和React编写原生移动应用
React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。
import React, { Component } from 'react';
import { Text, View } from 'react-native';class WhyReactNativeIsSoGreat extends Component {render() {return (<View><Text>如果你喜欢在Web上使用React,那你也肯定会喜欢React Native.</Text><Text>基本上就是用原生组件比如'View'和'Text'来代替web组件'div'和'span'。</Text></View>);}
}
2、React Native应用是真正的移动应用
React Native产出的并不是“网页应用”或“HTML5应用”或“混合应用”,其最终产品是一个真正的移动应用,从使用感受上而言,与用Objective-C或Java编写的应用相比几乎是无法区分的。React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';class AwkwardScrollingImageWithText extends Component {render() {return (<ScrollView><Imagesource={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}style={{width: 320, height:180}}/><Text>在iOS上,React Native的ScrollView组件封装的是原生的UIScrollView。在Android上,封装的则是原生的ScrollView。在iOS上,React Native的Image组件封装的是原生的UIImageView。在Android上,封装的则是原生的ImageView。React Native封装了这些基础的原生组件,使你在得到媲美原生应用性能的同时,还能受益于React优雅的架构设计。 </Text></ScrollView>);}
}
3、别再傻等编译了!
React Native让你可以快速迭代开发应用。比起传统原生应用漫长的编译过程,现在你可以在瞬间刷新你的应用。开启Hot Reloading的话,甚至能在保持应用运行状态的情况下热替换新代码!
4、可随时呼叫原生外援
React Native完美兼容使用Objective-C、Java或是Swift编写的组件。如果你需要针对应用的某一部分特别优化,中途换用原生代码编写也很容易。 想要应用的一部分用原生,一部分用React Native也完全没问题 —— Facebook的应用就是这么做的。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component {render() {return (<View><TheGreatestComponentInTheWorld /><Text>上面这个TheGreatestComponentInTheWorld组件完全可以使用原生Objective-C、Java或是Swift来编写 - 开发流程并无二致。</Text></View>);}
}
二、实战——搭建环境
安装依赖
- Node
- React Native脚手架
- Python2
- JDK
- Android Studio
建议:直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)。注意 Node 的版本必须大于等于 10,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。
注意:国内用户必须有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是无法正常翻墙。
1、安装node.js
(1)概述
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
(2)下载
网址:https://nodejs.org/en/download/
(3)安装
(4)配置
主要配置npm安装的全局模块所在的路径,以及缓存cache的路径,因为以后在执行类似:npm install express [-g] (可选参数-g,g代表global,全局安装)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
建议使用其它盘的目录作为全局安装的路径,比如:
D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\node_cache
在命令提示符后执行命令:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
在node_global里创建node_modules目录,然后创建环境变量NODE_PATH:
在Path变量里添加:
D:\Program Files\nodejs
D:\Program Files\nodejs\node_global
测试node是否配置成功,安装express模块(express是基于 Node.js 平台,快速、开放、极简的 Web 开发框架)
2、安装React-Native脚手架
npm install react-native-cli -g
3、配置nmp镜像源,安装yarn,配置yarn镜像源,可加速RN项目的创建
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --globalnpm install -g yarn react-native-cliyarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
4、利用react-native命令创建RN项目HelloWorld
react-native init HelloWorld
当项目初始化完成后,在当前目录下生成一个新的 React-Native项目HelloWorld,进入项目,目录结构如下:
- android: Android 工程源代码,可以通过 Android Studio 打开。
- ios: ios 项目工程源代码,可以通过 xcode 打开。
- node_modules: react-native 工程用到的模块。
- App.js 是 react-native 工程的主源码文件,入口文件,相当于 html 中的 index.html。
- package.json: 主工程描述文件。
5、安装Android Studio与配置SDK
(1)下载Android Studio
。
(2)安装Android Studio
启动Android Studio:
配置Android SDK:
设置模拟器:
(3)配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):
SDK 默认是安装在下面的目录:C:\Users\你的用户名\AppData\Local\Android\Sdk
你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。
你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。
(4)把 platform-tools 目录添加到环境变量 Path 中
此目录的默认路径为:C:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。
6、安装BlueStacks模拟器
(1)下载BlueStacks
http://www.bluestacks.cn/
(2)安装BlueStacks
(3)启动BlueStacks
(4)连接模拟器
蓝叠网络助手进程的ID:1228
查看该进程的端口号:netstat -ano|findstr "1228"
连接端口5555:
显示连接的设备:
7、运行RN项目HelloWorld
在项目根目录执行命令:react-native run-android
解决问题:Please accept all necessary SDK licenses using SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses".
再次运行项目HelloWorld:
切换到蓝叠模拟器,出现错误:不能加载脚本。
如何解决这个问题呢?
在项目的android/app/src/main/里创建assets目录:
在项目根目录执行命令:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
执行后会生成以下文件:
重新运行项目:
8、在WebStorm里打开RN项目HelloWorld,修改App.js文件,显示Hello React-Native World
import React, {Component} from 'react';
import {Text, View} from 'react-native';export default class SwiperDemo extends Component {render() {return (<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><Text>Hello React-Native World</Text></View>);}
}
初看这段代码,可能觉得并不像 JavaScript——没错,这是“未来”的 JavaScript。
首先你需要了解 ES2015 (也叫作 ES6)——这是一套对 JavaScript 的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现,所以目前而言 web 开发中还很少使用。React Native 内置了对 ES2015 标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是 ES2015 中的特性。如果你不熟悉 ES2015 的话,可以看看阮一峰老师的书。
示例中的这一行<View><Text>Hello React-Native World</Text></View>恐怕很多人看起来也觉得陌生。这叫做 JSX——是一种在 JavaScript 中嵌入 XML 结构的语法。很多传统的应用框架会设计自有的模板语法,让你在结构标记中嵌入代码。React 反其道而行之,设计的 JSX 语法却是让你在代码中嵌入结构标记。初看起来,这种写法很像 web 上的 HTML,只不过使用的并不是 web 上常见的标签如<div>或是<span>等,这里我们使用的是 React Native 的组件。
上面的示例代码中,使用的是内置的<Text>组件,它专门用来显示文本,而<View>就类似 html 中的div或是span这样的容器。
上面的代码定义了一个名为HelloWorld的新的组件(Component)。你在编写 React Native 应用时,肯定会写出很多新的组件。而一个 App 的最终界面,其实也就是各式各样组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的 JSX 语句。
再次运行项目HelloWorld:
发现屏幕显示的并不是Hello React-Native World:
怎么解决这个问题呢?重新执行bundle命令生成entry-file:index.js,之后再运行项目:
再次修改App.js:
import React, {Component} from 'react';
import {Text, View, Image, ScrollView} from 'react-native';export default class SwiperDemo extends Component {render() {return (<ScrollView><Imagesource={{uri: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=186212196,2872643961&fm=26&gp=0.jpg'}}style={{width: 640, height: 180}}/><Text>在iOS上,React Native的ScrollView组件封装的是原生的UIScrollView。在Android上,封装的则是原生的ScrollView。在iOS上,React Native的Image组件封装的是原生的UIImageView。在Android上,封装的则是原生的ImageView。React Native封装了这些基础的原生组件,使你在得到媲美原生应用性能的同时,还能受益于React优雅的架构设计。</Text></ScrollView>);}
}
运行项目:
结果如下:
RN学习笔记01:概述、特点与环境搭建相关推荐
- Fuzz学习笔记(一)—— WinAFL环境搭建与基本使用
WinAFL学习笔记(一)-- WinAFL环境搭建 环境配置 安装步骤 1)安装git 2)安装CMake 3)编译dynamorio 编译32位 编译64位 4)编译winafl 编译32位 编译 ...
- 【Android基础笔记01】Android开发环境搭建和HelloWorld
最近手头项目3.0版本要上线了, 没有那么多工作压力了, 抽空看了看之前在云笔记上做的笔记 都是一些基础知识 给大家分享出来吧 一.什么是Android?[了解 ] Android(中文俗称安卓)是一 ...
- f2fs学习笔记 - 2. f2fs基础实验环境搭建
1.前言 本文主要记录如何搭建f2fs的环境,用于f2fs文件系统的学习.我们选用了f2fs第一个补丁提交前的内核版本:linux3.7.0.然后通过提取出f2fs的最小补丁来学习f2fs文件系统,这 ...
- 单片机学习笔记1--资料下载、环境搭建(基于百问网STM32F103系列教程)
第1篇 资料下载.环境搭建 第一章 百问网视频体系及学习路线 1.1课程视频变化 2011-2020:百问网录制了10年的Linux视频. 2021: 1.首次进入单片机领域,发布单片机课程! 2.重 ...
- web安全测试学习笔记(一)之环境搭建:OWASP_Broken_Web_Apps靶机
web安全测试环境搭建:靶机OWASP_Broken_Web_Apps.渗透机Kali. 都搭建到虚拟机VMware. OWASP_Broken_Web_Apps下载地址:OWASP Broken W ...
- RN学习笔记02:利用WebStorm创建RN项目
RN学习笔记02:利用WebStorm创建RN项目 在RN学习笔记01里,安装了node.js与react-native-cli,而且配置了环境变量. 在命令行环境,利用react-native in ...
- Tomcat学习笔记01【Web相关概念、Tomcat基本操作】
Java后端 学习路线 笔记汇总表[黑马程序员] Tomcat学习笔记01[Web相关概念.Tomcat基本操作][day01] Tomcat学习笔记02[Tomcat部署项目][day01] 目录 ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- javaSE学习笔记01 入门篇
javaSE学习笔记01 入门篇 java语言概述 Java背景知识 java是 美国 sun 公司 在1995年推出的一门计算机高级编程语言. java早期称为Oak(橡树),后期改名为Java. ...
最新文章
- halcon:(4)halcon中XLD的概念与应用----汽车引擎盖圆孔检测
- ubuntu下编译安装PHP
- 图片加载利器Picasso 解析
- 矩阵的特征值、特征向量及其代码求解实现
- Serverless Kubernetes 容器服务介绍
- 计划学习研究模板引擎。学习stringtemplate先
- JAVA 中的数据结构
- Leecode20. 有效的括号——Leecode大厂热题100道系列
- F#基础教程 列表
- jsp解决mysql乱码_jsp+mysql时乱码的解决
- 41. 缺失的第一个正数 golang
- 安装Was liberty之步骤
- larvel nginx 配置
- How to: Create and Initialize Trace Listeners
- 发布一个 host 管理插件
- 实战项目 仿写小米商城 网页框架
- 回溯法解决最大团问题
- 智能驾驶是什么意思_智能驾驶L1L2L3L4到底是什么意思,再不知道就OUT啦
- Houdini图文笔记:Could not create OpenCL device of type (HOUDINI_OCL_DEVICETYPE)问题的解决
- STM32闭环步进电机驱动器方案,原理图,源码,PCB
热门文章
- 机器学习算法在用户行为检测(UBA)领域的应用
- Splunk集成Kafka配置方法
- webpack4.0各个击破(3)—— Assets篇
- 大前端的自动化工厂(3)—— babel
- plusready html5,封装一个简单实用的 plusready 方法
- R语言学习笔记(二)处理函数与基本图形绘制
- VScode+MarkDown导出PDF图片显示问题
- Win10开机一直转圈圈怎么办?一直转圈进不去系统的解决方法
- GitHub上如何删除fork别人的repository
- python多进程间通信_Python 多进程编程之 进程间的通信(Queue)