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>
        <Image
          source={{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 --global

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

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>
                <Image
                    source={{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>
        );
    }
}

运行项目：

结果如下：