React Native运行Hellow World（Windows+Android）

最新推荐文章于 2024-09-14 19:06:02 发布

I_See_Sky

最新推荐文章于 2024-09-14 19:06:02 发布

阅读量404

点赞数

分类专栏： react native的爬坑之路文章标签： android react-native react-native入门与实战

本文链接：https://blog.csdn.net/I_See_Sky/article/details/77141499

版权

react native的爬坑之路专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Hello World运行前的准备

如果你的React Native的环境都还尚未安装请查看React Native 在Windows下的环境安装

Java环境的安装
Android Studio环境的安装
下载Atom和安装Nuclide插件
创建Hello World和目录结构介绍
运行React Native项目

Java环境安装和配置

安装jdk64位，安装过程中要记得自己选择的安装地址；安装完成之后配置JAVA_HOME系统变量；进入我的电脑→属性→高级→环境变量。在系统变量下新建JAVA_HOME，输入C:\Program Files\Java\jdk1.8.0_31（你自己的安装地址的jdk目录）；如图所示：
Java环境配置
配置完成之后，再到系统变量Path中加入Java的命令行地址(XXX;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;记住前后之间一定要用分号分隔开)，配置完成之后Java算是安装成功了；如图所示：
Path配置

验证环境配置：在cmd中输入java去进行验证，如下图所示：

Android Studio安装和配置

下载Android Studio；下载完成之后，进行安装，在到设置安装目录界面时要记住自己SDK是安装在那个目录下的，或者安装成功之后在Welcom页面选择Configure>SDK Manager>Android SDK页面中Android SDK Location也能获取到Android SDK的目录；在接下来对Android Studio环境配置会用到；如下图所示：
AS选择安装目录
图：Android Studio选择安装目录
AS Welcome页面
图：Android Studio Welcome页面；

图：Android SDK目录

1.ANDROID_HOME系统变量配置；

安装完成之后就要开始配置Android SDK的系统变量了；新建ANDROID_HOME系统变量，填入E:\Android\sdk（自己Android SDK的安装目录）；如下图所示：

Android Home配置完成之后需要把ANDROID_HOME系统变量添加到Path系统变量中(XXXX;%ANDROID_HOME%;)；如图所示：
Android Home Path配置

2.ANDROID_TOOLS系统变量配置

在系统变量中新建ANDROID_TOOLS系统变量；输入E:\Android\sdk\platform-tools;E:\Android\sdk\tools(前面为安装Android SDK目录下的paltform-tools的目录地址；后面为Android SDK目录下的tools的目录地址，记得中间用分号分隔开)。完成以上步骤，Android Studio算是安装好了；如图所示：
Android Tools配置

验证方式：cmd中输入adb version去验证；如图所示：

下载Atom和Nuclide插件

在Atom官网去下载；下载完成之后去安装开发工具，安装完成后打开Atom；File>Settings>Install页面中搜索Nuclide插件，然后去安装；如图所示：
Nuclide安装

创建Hello World和目录结构介绍

在cmd中移动到你需要创建项目的目录中，然后输入react-native init HelloWrold（项目名）；即可创建项目；项目创建完成之后就可以在你创建的目录下看到那个项目了；如图所示：
创建HelloWorld
在Atom中导入你的项目；File>Add Project Floder去选择你需要导入的项目，导入之后，看下React Native项目的目录结构；如图所示：
React Native目录结构

1._ test _:React Native 单元测试文件夹
2. android：原生android工程文件夹
3. ios:原生ios工程文件夹
4. node_modules:React Native依赖的三方库
5. index.android.js:React Native Android App的入口文件
6. index.ios.js:React Native IOS App的入口文件
7. package.json:React Native工程配置文件，描述了工程所有信息以及三方库的依赖关系

运行Hello World

此时手机连接电脑，并安装相关驱动，手机进入USB调试模式；在cmd中输入adb devices去获取当前已连接的Android手机；如图电脑中插入一个名叫device的手机。
查询到插入的手机后，cd到项目目录中，接着就可以通过react-native run-android device（设备名）去运行React Native项目了，如图所示：
run react-native
在运行React Native过程中会自动开启Node.js服务（如果服务未开启的情况下）；如图所示：
node.js 服务
最后会下载相关环境和build Android Apk；最后会自动安装到你的手机上了；如下图所示：
run android