React Native运行Hellow World(Windows+Android)

原创 2017年08月13日 12:28:14

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

React-Native(一)Hello World,在windows上安装运行android

填坑日记 1.十分感谢清清大神的详细教程,链接为http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7...

React-Native(二)引入项目,在windows上运行已有的Demo for Android

项目是一个在交流群里认识的群友的,他现在只能在mac上跑通项目,所以我想试一下能不能在windows环境下跑通Android项目 1.首先我是将项目放到了自己新建的RN目录的workspace文件夹下...

React Native探索(一)环境搭建与Hello World(Windows/Mac)

目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于React Native 0.43,只适用于用W...

React Native Android入门实战及深入源码分析系列(1)——Hello world

因为现在找不到地方记录csdn账号,所以这里记一下:zeng890816@yahoo.cn 从今天起,我要分析React Native for Android的源码。 本系列主要是从使用和源码分析的角...

超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)

(一)前言         特别说明:群里很多童鞋都在说想Windows系统官方实例,但是官方提供的文档以及网上的例子都是OS X版本。今天特意给大家更新一下Windows版本运行官方 实例(UIEx...

运行react-native官方Examples步骤总结(Windows)

学习react-native就跟当初学习android一样,环境搭建完毕,代码也不知道怎么写,如果也没有demo运行一下看看这是个什么东西,总觉得RN很神秘复杂的样子。FaceBook官方早已经给我们...

Windows版本编译运行React Native官方实例UIExplorer项目

运行APP工作: 【注意】本文章的前置条件,需要你Windows环境正确安装了React Native环境:点击进入Windows系统安装配置React Native教程。 2.1.React...
  • limm33
  • limm33
  • 2016年03月16日 22:33
  • 492

Windows版本编译运行React Native官方实例UIExplorer项目

运行APP工作: 【注意】本文章的前置条件,需要你Windows环境正确安装了React Native环境:点击进入Windows系统安装配置React Native教程。 2.1.React...

Mac上搭建React Native Android开发环境并运行

react-native目前是越来越火,很多人都开始接触,环境搭建就显得比较重要,具体方法可以看一下这两篇文章 1、mac上搭建步骤 2、Mac OSX 安装nvm(node.js版本管理器)在执...
  • cuiran
  • cuiran
  • 2016年10月17日 11:56
  • 1266

react native 退出时保持后台运行(android)

在android app 的开发的开发过程中,我们需要监听android的返回键,退出active界面。     有时为了,能够给用户更好的体验,需要app退出界面后,app在后台运行。(当然这可能还...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native运行Hellow World(Windows+Android)
举报原因:
原因补充:

(最多只允许输入30个字)