安装工具
在Windows平台上开发React Native需要安装以下环境和工具:
1、Node
2、Android Studio
安装Node.js
略。。
安装Android开发工具Android Studio
可以到Android开发者官网进行下载:developer.android.com。
因为Android开发者官网的服务器设在国外,国内没有翻墙的用户通常情况一下是无法打开的,为此Google在2016年开发者大会上公布了developer.android.google.cn,这个特别为中国的Android开发者推出的官网,有中文界面。
可参考Android官方提供的按照教程来安装Android Studio:
https://developer.android.google.cn/studio/install
下载SDK
1、打开Android Studio, 点击 “Configure” 然后选择 “SDK Manager”
2、在"SDK Manager"中选择 “SDK Platforms” 点击 “Show Package Details” 选择 Android 10 (Q):
Android SDK Platform 29
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
3、之后选择 “SDK Tools” 点击 “Show Package Details” 展开 “Android SDK Build-Tools” entry, 选择 29.0.2以及其他更高的版本,点击 “Apply” 来下载Android SDK 和相关的 build tools。
添加环境变量
1、打开Windows Control的添加环境变量窗口
2、创建一个名为ANDROID_HOME 的环境变量,填写SDK路径:
通常SDK被安装在 %LOCALAPPDATA%\Android\Sdk目录下
另外,还需要将platform-tools添加到系统环境变量的Path中:
1、选择改变环境变量,选择Path
2、点击编辑,然后添加platform-tools所在的目录:
%LOCALAPPDATA%\Android\Sdk\platform-tools
记得将%LOCALAPPDATA%替换成你的真实目录。
创建项目
初始化一个React Native应用,通过React Native命令行工具来完成,打开终端输入并运行下面命令:
//创建一个KayBlog项目
npx react-native init KayBlog
//创建指定版本的RN项目
npx react-native init KayBlog --version X.XX.X
//创建支持typescript的RN项目
npx react-native init KayBlog --template react-native-template-typescript
运行此命令之后,React Native会从npm上下载一些项目所依赖的包,并完成项目的初始化:
KayBlog
│ index.js 项目入口文件
│
└───android Android Native项目;
│
└───ios iOS Native项目;
│
└───App.js/App.tsx 初始化时生成的模板页面
│
└───package.json 项目配置文件
运行项目
React Native应用创建完成之后呢,我们便可以运行它了,运行一个React Native应用通常有两种方式:
用vscode以Android启动为例
npx react-native run-android
//或者打开GitHub_RN/ios/GitHub_RN.xcworkspace 通过Xcode的运行按钮来和运行
//或者通过下面命令来运行
npm run android
第二种方式:通过Android Studio来运行
通过Android Studio打开项目下的android目录
然后等项目构建完成后通过Android Studio的运行按钮来和运行: