React Native 跨平台app开发入门

2018-01-11

ReactNative

# 了解 React Native

React Native 是 Facebook 推出的跨平台移动设备app开发框架，使用 react 和 javascript，就可以构建出原生的app应用程序。

主要功能如下：

## 构建真正的移动app

react native 构建出的不是 "mobile web app", "HTML5 app", 或者"hybrid app"，而是真正的原生app，它与 objective-c 或者 java 构建出的 app 体验几乎一致。

## 热加载

React Native可让您更快地构建应用程序，而无需重新编译，你可以立即重新加载你的应用程序。借助Hot Reloading，您甚至可以在保持应用程序状态的同时运行新代码。

## 同时支持原生方式编码

react native 可以和 objective-c 或者 java 等平滑的结合在一起，您可以使用 react native 实现一部分功能，使用原生编码实现另外一部分功能。


官方网站：[React Native](https://facebook.github.io)

# 开发环境准备

react native 有两种方式来编写 app ，为了方便学习，这里先介绍简单的方式，无需准备 Android 或者 ios 环境。

## Node

参考官网：

    https://nodejs.org/en/download/

## Yarn

直接用 node 安装：

    npm install -g yarn

或者从官网安装：

    https://yarnpkg.com/en/docs/install

在国内环境，需要配置镜像服务以加速包下载：

    yarn config set registry https://registry.npm.taobao.org

安装好之后，需要配置 yarn 的 global 安装位置到系统的path中，获取 global 安装位置：

    yarn global bin

将此路径配置到环境变量的 path 中

## react native 运行环境 expo

可以从官网获取到下载链接，将 expo 安装到手机中：

    https://expo.io/learn

## create-react-native-app

用于初始化 react native Project，安装：

    yarn global add create-react-native-app


# 第一个 app

运行下面指令，就可以初始化一个 react native app 项目，并打印出一个二维码：

```bash
create-react-native-app MyFirstApp
cd MyFirstApp
yarn start
```

在手机上启动 expo，并扫描二维码，即可查看运行效果。

注意：需要保证 手机跟电脑在同一个局域网，并且开启 expo 的 “在其他应用之上显示内容” 权限。

## 热更新

在 expo 的模拟运行界面，晃动手机，会呼出菜单，选中 hot reloading，然后更改 app.js，可以看到更改之后的内容会直接更新在手机上显示。

# 参考：

* [React Native Getting Started](https://facebook.github.io/react-native/docs/getting-started.html)

本文为博主原创，如需转载，请注明出处：http://www.supperxin.com

返回博客列表