一 环境配置
源文档 https://reactnative.cn/docs/getting-started/
window环境配置
暂时用的window
后面可以补上ios
安装依赖
- Node,
- Python2
- JDK
注意 Node
的版本必须高于 8.3,Python
的版本必须为 2.x(不支持 3.x),而 JDK
的版本必须是 1.8(不支持 1.9)。
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Android 开发环境
- 安装
Android Studio
确保选中了以下几项:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
- 安装 Android SDK
Android Studio
默认会安装最新版本的Android SDK
。目前编译React Native
应用需要的是Android 8.0 (Oreo)
版本的 SDK。你可以在Android Studio 的 SDK Manager
中选择安装各版本的 SDK。
你可以在Android Studio
的欢迎界面中找到SDK Manage
r。点击"Configure
",然后就能看到"SDK Manager"。
SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。
在 SDK Manager
中选择"SDK Platforms
"选项卡,然后在右下角勾选"Show Package Details
"。展开Android 8.0 (Oreo)
选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):
- Android SDK Platform 26
- Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)
然后点击"SDK Tools
"选项卡,同样勾中右下角的"Show Package Details
"。展开"Android SDK Build-Tools
"选项,确保选中了React Native
所必须的26.0.3版本。你可以同时安装多个其他版本,然后还要勾选最底部的Android Support Repository
。
最后点击"Apply
"来下载和安装这些组件。
- 配置 ANDROID_HOME 环境变量
React Native
需要通过环境变量来了解你的Android SDK
装在什么路径,从而正常进行编译。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME
的环境变量(系统或用户变量均可),指向你的 Android SDK
所在的目录(具体的路径可能和下图不一致,请自行确认):
SDK 默认是安装在下面的目录:
c:Users你的用户名AppDataLocalAndroidSdk
你可以在 Android Studio
的"Preferences
"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。
你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。
创建新项目
这里就不用官方文档提供的init
方法,因为比较坑,会出现很多红屏,很多错误,对于初学者,不友好,折腾了几天,没搞出来,经过查阅原始faccebook
官方文档 https://facebook.github.io/react-native/docs/getting-started.html,这里国内用户要翻墙。
create-react-native-app
,简称CRNA
,用来快速创建react native
的app
。
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
这里是官方提供的脚手架,还是很方便,跳过一万种环境错误红屏。
npm start
命令能让你的 RN app
运行在开发模式中。你可以在你的 ios
或 android
手机中下载expo
的app
,然后在 expo
中可以通过局域网实时查看RN
应用!这中方法比模拟器方便许多,而且不需要连接电脑哟。你的团队成员都可以实时预览,非常方便。
expo
的相关工具和预览app
在这里
https://expo.io/, 下载地址页面https://expo.io/tools,下载地址https://expo.io/tools,有可能网速比较慢,要耐心等待。 下载完成后传给手机,手机安装后就可以扫码,愉快的打开react native app
了。
我们进入CRNA
创建的项目,npm start
运行,可以看到出现一个硕大的二维码。
在expo
中扫码即可加载运行,加载后会出现.
这里的地址都是要翻墙的哦,如果不会翻墙,可以看看我的github
仓库star
的
XX-Net这个工具,翻墙稳定且高效
作者:刘伟波
链接:http://www.liuweibo.cn/p/213
来源:刘伟波博客
本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作
发表评论: