53 React Native 跨平台app开发入门 - xiaoxin01/Blog GitHub Wiki

了解 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

开发环境准备

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 项目,并打印出一个二维码:

create-react-native-app MyFirstApp
cd MyFirstApp
yarn start

在手机上启动 expo,并扫描二维码,即可查看运行效果。

注意:需要保证 手机跟电脑在同一个局域网,并且开启 expo 的 “在其他应用之上显示内容” 权限。

热更新

在 expo 的模拟运行界面,晃动手机,会呼出菜单,选中 hot reloading,然后更改 app.js,可以看到更改之后的内容会直接更新在手机上显示。

参考:

⚠️ **GitHub.com Fallback** ⚠️