快速搭建RN开发环境

发表于 | 分类于 ， |

ReactNative 快速开始

学习使用 ReactNative 最令人头疼的就是环境问题，因为大多数 Web 开发者，并不熟悉 Android 与 IOS 的开发环境，配置起来比较繁琐。当然 Android 程序员也不熟悉 IOS 环境，反之亦然，这导致很多人因为繁杂的开发环境而放弃学习或者暂时搁浅。

为了改善这个问题，一个快速的开发环境解决方案应运而生。这个方案需要两个工具：1. create-react-native-app 2. Expo。

create-react-native-app

这是一款用来创建 ReactNative 项目的脚手架工具。特点是无需配置繁杂的 Android 或 IOS 开发环境，便可进行原生应用的开发，极大简化了环境搭建与配置的过程，很适合学习使用。

安装

1
2
3
4
5
# 安装
npm install -g create-react-native-app

# 检测，文档更新时最新版本2.0.2
create-react-native-app --version

使用

1
2
3
4
5
6
# 创建项目
create-react-native-app projectName

# 启动项目
cd projectName
expo start

Expo

这是一款安装在手机上的应用，专门负责运行上述方式构建的 App，这有点像是微信里面运行的小程序。IOS 可以到 AppStore 里面搜索下载，Android 可以到 GooglePlay 里面搜索下载，也可以到 Github 里下载。

真机运行

准备工作：使用create-react-native-app创建一个项目，然后手机安装Expo应用，并确保手机与开发机处于同一局域网下。

项目运行：npm start启动项目，打开Expo应用，使用里面的扫一扫功能，扫描项目启动后生成的巨大二维码，等待JS打包传输完毕，就会在手机上运行。

IP错误问题

因为开发机可能会有多个ip地址，比如以太网IP、虚拟IP、无线局域网IP等等。当项目启动时通常会无脑的选择IP列表中的第一个，假如是以太网IP，那么就与手机所处的无线局域网不同，造成网络连接失败。

下面是这种情况的图例，项目启动时使用的是IP列表中的第一个94 IP，并没有使用无线局域网IP。

ipconfig

expo-service

如果发生这种情况，先Ctrl+C停掉项目，设置一个环境变量，然后再重启项目即可。

1
2
3
4
5
# 设置环境变量
set REACT_NATIVE_PACKAGER_HOSTNAME=my-custom-ip-address-or-hostname

# 重启项目
npm start

开发初体验

  • 在项目根目录下有个 App.js , 是应用的根组件, 我们手机上看到的内容就是这个组件实现的
  • 尝试修改 App.js 中的文本内容, 然后手机摇一摇, 点击 Reload 选项即可更新修改内容
  • 也可尝试给文本添加新的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// 导出根组件, 组件的定于语法与之前学习的一样
export default class App extends React.Component {
  render() {
    return (
        // 返回的视图需要使用View组件包裹, 作用相当于Div标签
        <View style={styles.container}>
            {/* 文本内容使用Text组件包裹, 作用相当于P标签 */}
            <Text>Open up App.js to start working on your app!</Text>
        </View>
    );
  }
}

// 定义样式, 这里的尺寸大小无需加单位, 元素可以通过数组引用多个样式, 后面的样式优先级比前面的高
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

错误提示 - 红屏和黄屏

RN代码运行时会把错误分为红屏和黄屏两种，红屏会以全屏红色显示在应用中，导致程序无法正常运行，红屏通常是编码错误导致的，必须修复。

黄屏代表警告，会显示在应用下方，不影响程序运行，不修复也可以，警告可以通过代码禁止。

红屏和黄屏只在debug版本中才会显示，在rellease版本中不会。一般情况下，通过RN红屏中的错误提示信息，就可以定位问题，如果是语法等常见运行错误，RN也会给出错误代码所在位置与行数，所以出现红屏一定要阅读描述信息。

1
2
3
4
5
6
// 频闭黄色警告，参数为一个数组：数组中的字符串就是要屏蔽的警告的开头的内容。
YellowBox.ignoreWarnings(['Warning: ']);

// 手动触发红屏和警告
console.error("严重错误");
console.warn("警告");

调试菜单

React-Native开发调试没有本地代码方便，但也是可以调的，在调试菜单中可以进行开发调试相关的配置。调试菜单只在debug版本中可以被调出，如果是模拟器环境，Windows平台按window+m可调出，也可能是F1或F2，Mac平台按commond+m可调出，或者发送adb shell input keyevent 82指令。如果是真机，摇一摇就可以调出调试菜单。

调试菜单预览

调试菜单说明

  • Reload: 重新加载整个页面
  • Debug JS Remotely: 启动远程调试, 会自动打开chrome浏览器, 然后可在开发者工具中调试js
  • Enable Live Reload: 开启自动加载, 代码变动会自动更新整个页面
  • Enable Hot Reloading: 热更新, 代码变动自动的进行局部更新
  • Dev Sttings: 开发调试配置
分享