搭建React Native开发环境

1、参考搭建开发环境 · React Native 中文网

2、安装依赖

        必须安装的依赖有:Node、JDK 和 Android Studio

2.1、安装Node

  安装包下载地址下载 | Node.js  注意 Node 的版本应大于等于 12

搭建React Native开发环境_第1张图片

下载node对应版本的安装文件,直接安装即可,安装完成之后。打开命令行,输入node --version 能够显示版本时,说明安装成功。

如果提示找不到该命令,可能是环境变量没有添加。把Node安装目录添加到环境变量,重新打开命令行输入node --version即可

        

 

安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程,命令行输入npx nrm use taobao

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

2.2、安装JDK

JDK的安装方法可以自行网上查找,或者参考JDK的最详细的安装教程 - 小玲子丫 - 博客园

注意:低于 0.67 版本的 React Native 需要 JDK 1.8 版本(官方也称 8 版本)

验证JDK是否安装成功,在命令行输入java -version 可以显示版本时说明安装成功

        

 

2.3、安装Android Studio

     Android Studio安装方法可以自行网上查找,或者参考Android Studio超详细安装教程 - 知乎

 

2.3.1、配置Android Studio     

        目前编译 React Native 应用需要的是Android 10 (Q)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android 5 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

搭建React Native开发环境_第2张图片

搭建React Native开发环境_第3张图片

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 10 (Q)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

搭建React Native开发环境_第4张图片

 

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的29.0.2版本。你可以同时安装多个其他版本。

然后还是在"SDK Tools"选项卡,点击"NDK (Side by side)",同样勾中右下角的"Show Package Details",选择20.1.5948944版本进行安装。

搭建React Native开发环境_第5张图片

搭建React Native开发环境_第6张图片

 最后点击"Apply"来下载和安装这些组件,直到安装完成

 

2.3.2、配置 ANDROID_HOME 环境变量

    React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

搭建React Native开发环境_第7张图片

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效

2.3.3、把一些工具目录添加到环境变量

        打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

3、创建新项目

 如果你之前全局安装过旧的react-native-cli命令行工具,请使用

npm uninstall -g react-native-cli 卸载掉它以避免一些冲突

注意:请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要使用与核心模块同名的项目名(如 react, react-native 等)。

命令行进入到你的项目路径下,执行npx react-native init AwesomeProject

成功之后出现以下信息

搭建React Native开发环境_第8张图片

 在工程目录下可以看到以下文件

搭建React Native开发环境_第9张图片

 

4、真机调试

        手机连接电脑,手机需要打开USB调试模式。命令行输入adb devices,如果能看到以下信息,说明手机连接成功

        

         

        命令行进入到工程AwesomeProject目录下,执行命令npx react-native run-android

        搭建React Native开发环境_第10张图片

手机显示

 搭建React Native开发环境_第11张图片

修改工程目录下的App.js会自动更新到手机

 

你可能感兴趣的:(react,native,react.js,javascript)