React Native应用创建及初始化项目目录_伍什kay

网络 02-07 2095

安装工具

在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的运行按钮来和运行：