React Native环境配置和简单使用

时间：2022-09-15 08:18:40

前言

  • 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

  • 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

  • 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

更新公告：

更新内容：

  • 新增 github 下载的项目运行不了 这小节（之前忘记写了，抱歉）

了解 React Native

  • 大家都知道，开发原生 App 的成本很高，但是目前基于原生开发仍然是必需的，随着 HTML5 的出现，我们可以使用 Web 开发，虽然能够实现在所有有浏览器的平台上使用并且支持试试热部署，但是在体验方面仍无法超越原生 App ，那么有没有成本较低，又比较好的解决方案呢？答案就是 Native 相对于 Web，Native 有下面几点优点

    • Native 的原生控件有更好的体验（目前认为最大的优势）
    • Native 有更好的手势识别
    • Native 有更合适的线程模型（Web Worker 也可以解决这部分问题，但是在图形解码、文本渲染上仍然没办法多线程渲染，这样就会影响 Web 展示的流畅性）
    • Native 的流畅度目前和原生的保持在同一层次（在优化好的前提下）

  • React Native 是 Facebook 在 F8 大会开源的，在不到一年的时间内成为手机端必不可少的开发模式，像国内Pad版的QQ空间、淘宝等都是使用 React Native 开发的，其中做得比较好的当属淘宝

  • React Native 设计理念就是即拥有 Native 的用户体验，又保留 React 的开发效率

  • 开发者可以灵活使用 HTML 和 CSS布局，使用 React 语法构建组件，实现 H5, iOS, Android 多端的代码复用，大概结构如下图

React Native环境配置和简单使用

React Native 开发注意事项

  • 目前React Native 在 iOS 上仅仅支持 iOS7 及以上操作系统，Android 仅支持 Android4.1 及以上操作系统，github下载地址 官方文档
  • React Native 的版本更新速度特别快，如果没有比较好的 JavaScript 基础，下列的建议还是必要参考的
    • 对于部分复杂的应用，考虑原生 + React Native 混合开发方式

React Native 开发环境配置

  • 在安装 React Native 之前我们需要先配置一下所需的开发环境，具体详细见下面

  • 环境要求

    • 安装 Homebrew（ Homebrew 是 OSX 的套件管理器，我们可以通过它获取并安装很多需要的组件
      • 安装方式：打开 Mac 的终端 → 粘贴命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
      • 验证是否安装成功：打开 Mac终端 → 粘贴命令 brew -v，出现类似下列提示表示安装成功

    React Native环境配置和简单使用

  • 安装 WatchMan（该插件用于监控bug文件和文件变化，并且可以出发指定的操作）

    • 安装方式：打开Mac的终端 → 粘贴命令 brew install watchman
    • 验证是否安装成功：待看到类似以下的提示表示安装成功

    React Native环境配置和简单使用

  • 安装 Flow（flow 是一个 JavaScript 的静态类型检查器，方便找出代码中可能存在的类型错误）安不安装看个人，推荐安装

    • 安装方式：打开Mac的终端 → 粘贴命令 brew install flow
    • 注意事项：（如果提示 command not found,需要在命令前加上sudo获得最高权限） - 验证是否安装成功：待看到类似以下的提示表示安装成功

    React Native环境配置和简单使用

  • 安装 npm 和 Node.js

    • Node.js 最好安装4.0及更高版本，Node 内包含了 npm，所以直接下载Node.js安装
    • 下载方式：选择各自系统版本下载

    React Native环境配置和简单使用

正式安装 React Native

  • 安装 React Native

    • 安装方式：打开Mac的终端 → 粘贴命令 npm install -g react-native-cli
    • 注意事项：（如果提示command not found或者出现一大堆error提示的,在确保已经安装npm的情况下需要在命令前加上 sudo 获得最高权限）

    React Native环境配置和简单使用

  • 验证是否安装成功：

    React Native环境配置和简单使用

安装 iOS 和 Android 开发环境

  • iOS需求：Xcode7及以上更高版本

  • Android 需求

    • 下载安装最新版Android studio
      • 方式一：可以安装 Android studio 省略下面的步骤（推荐）
      • 建议提前修改下 hosts，要不稍后下载sdk特别慢
        • 命令行：sudo sudo vi /etc/hosts/ → 添加203.208.46.146 dl.google.com

          45 203.208.46.146 dl-ssl.google.com → :wq 保存退出
    • 方式二：(比较麻烦，需要配置)
      • 安装 Android SDK
        • 安装方式：brew install android-sdk
        • 验证是否安装成功：

    React Native环境配置和简单使用

  • 定义 Android_HOME 环境变量

    • 确保 Android_HOME 环境变量指向已经安装的 Android SDK 目录（路径/.bashrc,/.bash_profile或者终端所用的其它配置文件中增加下面的内容）
    	# 如果你是通过Homebrew安装SDK的，则加入下列路径
    
	export ANDROID_HOME=/usr/local/opt/android-sdk
    
	# 否则加入下列路径
    
	export ANDROID_HOME=~/Library/Android/sdk

  • 设置SDK

    • 打开Android SDK Manager（Mac用户在终端下输入 android）→ 选中以下项目
    	Android SDK Build-tools version 23.0.1（这个必须版本严格匹配23.0.1）
    
	Android 6.0 (API 23)
    
	Local Maven repository for Support Libraries(之前叫做Android Support Repository)

  • 具体设置看下面的动态图（这边我就只安装常用的）

    React Native环境配置和简单使用

  • 安装 Genymotion（Genymotion 是第三方模拟器，比起Google官方的模拟器更易设置且性能更好。但是，它只针对个人用户免费）

    • Genymotion下载安装
    • 打开Genymotion，如果没有安装VirtuaIBox，会提示安装

      React Native环境配置和简单使用
    • 创建一个模拟器并启动
    • 按下Mac快捷键 cmd + M 可以打开开发者菜单（在安装并启动了React Native应用后可用）

测试 React Native 等各项功能是否正常

  • 生成新工程

    • 打开 Mac 的 终端 → 粘贴命令 react-native init 项目名称(这边我们就用react-native init TestRN)，成功后会出现以下提示

      React Native环境配置和简单使用

      React Native环境配置和简单使用

    • 注意事项：这边需要注意的是，速度快慢和网络情况有关（React-Native命令行需要从npm官方源下载代码会遇上麻烦，可以将npm仓库源替换成国内镜像）

      • 方式：打开 Mac 的终端 → 粘贴下面命令
        • npm config set registry https://registry.npm.taobao.org
        • npm config set disturl https://npm.taobao.org/dist

工程目录结构分析

  • 现在我们的新工程(TestRN)已经配置好了，那么生成的文件都在哪里呢？不知道上面的图中有没有发现，其实已经提示我们路径就是如下图标记出来的位置

    React Native环境配置和简单使用

  • 打开我们的TestRN，我们可以看到默认生成了 iOS 和 Android 两个平台的原生项目

  • 除了这些之外，还有 index.ios.js 和 index.android.js （这就是入口），node_modules文件夹是为Node.js存放和管理npm包资源，也包含React Native框架文件

    React Native环境配置和简单使用

在 iOS 上运行第一个 React Native 应用

  • 使用 Xcode 打开我们 iOS 文件夹中的工程

  • 运行工程文件（不管 iOS 还是 Android，在开发阶段都需要在系统上启动一个HTTP服务 —— Debug Server，默认运行在8081端口，APP通过它加载js）

  • 注意事项：这个窗口不要关闭

    React Native环境配置和简单使用

  • 运行效果

    React Native环境配置和简单使用

在 Android 上运行第一个 React Native 应用

  • 方式一：如果是安装了 Android studio 的朋友可以直接使用它运行

  • 方式二：命令行打开项目主目录（我这边路径为/Users/yeshaojian/TestRN）:cd /Users/yeshaojian/TestRN → 命令行：react-native run-android → 第一次运行的话会下载一些必要的 SDK，时间比较久，所以只能耐心等待

  • 注意事项：这个窗口不要关闭

    React Native环境配置和简单使用

  • 运行效果

React Native环境配置和简单使用

如何查看和修改代码

  • 我习惯使用 WebStrom 这个 HTML 开发神器，这边就以这款神器为例

  • 目录结构

    React Native环境配置和简单使用

  • 这边就以 iOS 为例，我们点击index.ios.js就可以查看代码了，接下来看看大概部分

    React Native环境配置和简单使用

    React Native环境配置和简单使用

    React Native环境配置和简单使用

    React Native环境配置和简单使用

  • 修改代码（我们将 Welcome to React Native! 修改成 hello Word！）

	export default class TestRN extends Component {

  		render() {

    		return (

      			<View style={styles.container}>

        			<Text style={styles.welcome}>

              			hello Word！

        			</Text>

        			<Text style={styles.instructions}>

          			To get started, edit index.ios.js

        			</Text>

        			<Text style={styles.instructions}>

          			Press Cmd+R to reload,{'\n'}

          			Cmd+D or shake for dev menu

        			</Text>

     			</View>

    		);

  		}

	}

  • 在模拟器上使用 cmd + R 就可以刷新了

    React Native环境配置和简单使用

管理 React Native 版本

  • 因为 React Native 经常更新，我们开发中也经常需要控制它的版本库，来做到适配各种条件下的开发，那么如何查看和控制版本，在网上搜了一些资料整理后感觉下面的方式还是比较方便的分享给大家

  • 查看本地的 React Native 版本

    • 命令行：react-native --version

      React Native环境配置和简单使用

  • 更新本地的 React Native 的版本

    • 命令行：npm update -g react-native-cli

  • 查询 react-native 的 npm 包最新版本

    • 方式一：npm包地址
    • 方式二：npm info react-native

      React Native环境配置和简单使用
    • 方式三：项目中查看当前 npm 包版本

      React Native环境配置和简单使用

  • 升级或降级 npm 包的版本

    • 命令行：npm install --save react-native@0.18

  • 更新项目 templates 文件（新的npm包会包含更新运行在 react-native init 命令生成的一些动态文件，比如 init 创建项目的时候会生成 iOS 和 Android 的子项目，我们可以通过下面的命令获取最新代码）

    • 命令行：react-native upgrade

github 下载的项目运行不了

  • 其实这是因为下载的项目自动忽略了node文件夹内所有的内容，因为如果电脑内装的版本和作者使用的版本不同，那么也会运行不了，既然这样干脆就不托管，由下载项目的用户自己进行配置，那怎么配置呢？这边我们来讲下：

  • 打开终端，进入我们下载的项目根目录下：

    cd 下载的项目根目录路径

  • 接着,安装npm包就可以了：

  npm install
  • 等到安装完毕后，我们就可以运行项目了。

WebStom设置React Native代码提示

从 gitHub 上下载xml插件：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

  • 安装
    • 将ReactNative.xml复制到 ~/Library/Preferences/WebStorm10/templates(就是webStorm的安装的目录) → 如果没有 templates文件夹，我们可以自己新建一个，然后重启 WebStrom

React Native环境配置和简单使用

相关文章