53 React Native 跨平台app开发入门 - xiaoxin01/Blog GitHub Wiki
React Native 是 Facebook 推出的跨平台移动设备app开发框架,使用 react 和 javascript,就可以构建出原生的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 环境。
参考官网:
https://nodejs.org/en/download/
直接用 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 中
可以从官网获取到下载链接,将 expo 安装到手机中:
https://expo.io/learn
用于初始化 react native Project,安装:
yarn global add create-react-native-app
运行下面指令,就可以初始化一个 react native app 项目,并打印出一个二维码:
create-react-native-app MyFirstApp
cd MyFirstApp
yarn start
在手机上启动 expo,并扫描二维码,即可查看运行效果。
注意:需要保证 手机跟电脑在同一个局域网,并且开启 expo 的 “在其他应用之上显示内容” 权限。
在 expo 的模拟运行界面,晃动手机,会呼出菜单,选中 hot reloading,然后更改 app.js,可以看到更改之后的内容会直接更新在手机上显示。