关闭

React Native运行Hellow World(Windows+Android)

标签: androidreact-nativereact-native入门与实战
66人阅读 评论(0) 收藏 举报
分类:

Hello World运行前的准备

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

  1. Java环境的安装
  2. Android Studio环境的安装
  3. 下载Atom和安装Nuclide插件
  4. 创建Hello World和目录结构介绍
  5. 运行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去进行验证,如下图所示:
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
图:Android SDK目录

1.ANDROID_HOME系统变量配置;

安装完成之后就要开始配置Android SDK的系统变量了;新建ANDROID_HOME系统变量,填入E:\Android\sdk(自己Android SDK的安装目录);如下图所示:
Android Home配置
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去验证;如图所示:
adb 验证

下载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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:667次
    • 积分:60
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章存档
    最新评论