React Natvie 使用入门

介绍

React Native 将 Web 前端开发的 React 迁移到移动 app 开发，是一个使用 JavaScript 和 React 技术开发原生移动 app 的框架。

React Native

使用 expo-cli

expo-cli

Expo CLI 创建、启动 react-native 项目，并连接到模拟器或真机或 Web。

npm i -g expo-cli

cd AwesomeProject

# 初始化
expo init

# 启动
expo start  // npm start

# 发布到线上预览
expo publish // expo start 需要同时打开，提供打包服务

客户端连接不上时，尝试升级到最新版本

expo web with react-hot-loader (experiment)

npm i react-hot-loader/root
npm run web

App.js

import { hot } from 'react-hot-loader/root';
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

class App extends React.Component {
  ...
}

export default hot(App);

在线构建

配置打包信息

"ios": {
  "bundleIdentifier": "com.mycompany.myappname",
  "supportsTablet": true
}, 
"android": {
  "package": "com.mycompany.myappname"
},

构建

# 优化图片
expo optimize

expo build:android

expo build:ios

构建完成后，可以下载 apk 或 ipa。

expo client

Expo Client 安装在 Android 或 IOS 真机或模拟器上的客户端，用来连接并展示开发中的应用。

Snack，在线编译和预览

https://snack.expo.io/

调试

React Native Debugging

Android 模拟器为例：

双击R：刷新页面
Ctrl+M：打开开发者菜单

react-native-debugger

老版本：使用 react-native-cli

以 Windows Android 平台为例

安装依赖

node >=6
JDK >=8

Python2

  choco install -y nodejs.install python2 jdk8

React Native CLI
```
  npm install -g react-native-cli
```

安装 Android 开发环境

Android Studio

安装时选择自定义，选择
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
Android SDK

Android Studio 的 Tools > SDK Manager 菜单，两个标签页

SDK Platforms > Android 6.0 (Marshmallow) > 选中
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
SDK Tools > Android SDK Build-Tools > 选中23.0.1

然后点应用，等待安装完成
Android Virtual Device

Android Studio 的 Tools > AVD Manager 菜单 > create a new AVD > 选择创建虚拟设备的配置

Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

配置

环境变量 ANDROID_HOME 设置成 Android SDK 目录

创建项目

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

CL's Blogs