React Native应用创建及初始化项目目录

安装工具

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

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值