React Native 入门笔记一 -- Windows下基本环境配置

  • Z时代
  • 2024-01-10
  • 分类：综合

react

一、准备工作

首先，需要安装nodejs，可以从nodejs官网下载，注意，React Native 要求node版本在4.0或以上；否则会出错，我建议把node版本升到最新版本，防止后面出现各种莫名其妙的问题，我这里安装的版本是v6.9.3LTS的，安装之后npm也一并安装好了，可以运行命令查看当前node版本和npm版本；

node -v
v6.9.2
npm -v
3.10.9

注意：由于众所周知的原因，国内一些网站无法打开，所以建议先打开VPN等FQ软件，我这里用的是蓝灯，这里一定要注意，否则后面的步骤无法进行； 

二、正式开始

安装Android Studio并配置Android虚拟机

1、下载Android Studio安装包，然后进行安装，安装的过程很简单，直接点下一步即可；安装的过程可能要等待数十分钟，直到点Finish完成；

2、进行环境变量的配置：

a、添加ANDROID_HOME环境变量：

b、将Android SDK的Tools目录添加到PATH变量中

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。

3、打开命令行窗口，输入android，进入到Android SDK Manger，下载我们需要的SDK；

  • Tools/Android SDK Tools (24.3.3)

  • Tools/Android SDK Platform-tools (22)

  • Tools/Android SDK Build-tools (23.0.1)（这个必须版本严格匹配23.0.1）

  • Android 6.0 (API 23)/SDK Platform (1)

  • Extras/Android Support Library(23.0.1)

  • Extras/Android Support Repository

4、切换到Android 6.0选项卡，注意：必须选择这项，因为React Native目前必须要这个版本的，然后就是等待下载并安装，安装完成后关闭就行，Android SDK Build-tools必须选择23.0.1，否则后面会出现错误 ；

5、下载进行安卓虚拟机的配置，当然，也可以用真机进行测试，首先打开Android Studio，新建一个空白工程，根据实际需要，选择合适的工程目录（project location），强列建议工程目录不要建在C盘，我这里选择的是D盘，其它的采用默认配置即可；

6、点击顶部菜单栏手机图标进行下一步，选择一个模拟设备；

7、点击上图中绿色的三角图标，就可以打开虚拟机了； 

8、至此，Android相关的配置工作就结束了，下面进行React Native工程的构建； 

三、创建React Native工程

1、打开命令行窗口，在弹出的命令框当中输入以下指令，回车

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2、可以运行下面命令，查看NPM库是否切换为阿里源；

npm config get registry

3、安装react-native命令行工具

npm install -g react-native-cli

4、创建项目，进入工作目录，运行

cd D:\react-native-demos
react-native init AwesomeProject

并耐心等待数（或数十）分钟。

5、运行packager

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问通常需要十几秒，并且在packager的命令行可以看到形如[====]的进度条。

6、运行模拟器，保证模拟器处于打开状态；

7、安卓运行，保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。最好提前把VPN等FQ软件打开，确保网络连接状态良好可以下载；运行完毕后可以在模拟器或真机上看到应用自动启动了。

成功后手机界面：

8、接下来就可以用Android Studio或者Webstorm等开发工具进行开发了！

以上是 React Native 入门笔记一 -- Windows下基本环境配置 的全部内容， 来源链接： utcz.com/z/381552.html

回到顶部