React Native在windows上的android开发环境搭建

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mutong19890803/article/details/53781491

1.安装nodejs和python2

方式1:官网下载

    nodejs:https://nodejs.org/en/download/current/

    python2:https://www.python.org/downloads/

    nodejs安装可以选择最新版的,python2选择2.X版本

方式2:chocolatey下载

    首先先下载chocolatey,下载方式参照:软件自动化管理工具-Chocolatey

    通过chocolatey下载和安装nodejs,python2,运行cmd

       choco install nodejs.install

       choco install python2


2.安装android sdk和avd

本来安装android sdk时很麻烦的事儿  需要用到 sdk manager来进行插件管理。但是由于android Studio里面提供了  android sdk manager  和avd ,所以React Native 官方推荐使用 安装 android studio。

下载地址:https://developer.android.com/studio/index.html

安装时将组件全部勾选,

等所有组件安装完成会进入欢迎页面,在右下角点击Configure按钮,然后选择SDK Manager,

选择 SDK Platforms,将以下几项勾选



然后切换到SDK Tools


勾选完成后 点击apply,开始安装SDK。

安装完成后,配置环境变量

我的电脑-》右键-》属性


3.配置java sdk

下载安装java sdk8,官方要求sdk版本需要在1.8以上。

下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


然后选择windows版本的下载,例如;

Windows x64 195.13 MB   jdk-8u112-windows-x64.exe

直接下载:http://download.oracle.com/otn-pub/java/jdk/8u112-b15/jdk-8u112-windows-x64.exe

下载安装完成后开始配置 JAVA_HOME和PATH 环境变量,


3.1 将JAVA_HOME变量配置到jdk1.8.0_101根目录下



3.2 将Path变量配置到jdk1.8.0_101/bin目录下


配置完成后,环境配置完毕。


4.初始化react-native项目

4.1安装全局react-native-cli

cnpm install react-native-cli -g

安装完成后运行初始化命令,可以直接运行,也可以使用官方提供的yarn工具进行安装。

直接安装:

react-native init AwesomeProject    //AwesomeProject为项目名称,暂时用官网提供的demo名称

yarn工具:

npm install yarn -g   

安装往yarn之后,在运行上面的init命令。


等待项目初始化完成,一般需要几分钟的时间。初始化完成后的项目目录:


其中android和ios文件夹为相应平台的环境编译文件,index.android.js和index.ios.js为相应平台的入口js。

4.2运行react-native项目

在生成的项目中运行命令:

react-native start

会进入打包页面,成功后会出现:


最后会有打包后的页面访问入口:此时访问:http://localhost:8081/index.android.bundle?platform=android

如果可以正常访问,则证明packager服务器正常。该服务器不要关闭!!!,切记!

4.3android模拟机运行项目

由于android studio里面的模拟机用起来比较笨重,所以我这边选择Genymotion来进行模拟。react官方也有相应的说明。

Genymotion的下载地址:https://www.genymotion.com/

  1. 该网站需要先注册登录之后,才可以进行免费的下载。
  2. 下载安装后,开启,并新建一个模拟机。
  3. 在命令行里启动React-native的运行命令

react-native run-android

接下来就进入了安装gradle包的页面。

等待下载安装完毕后,如果模拟机出现红色屏幕,则打包app正常。有时候字样可能不一样。


此时打开模拟机,点击 Ctrl+M    选择Dev Settings 》选择host&port 》配置ip和port,ip可以通过ipconfig 或者 http-server(需要npm安装)命令来查询

  

然后点击返回键,点击 Ctrl+M  选择Reload


当出现欢迎界面时,环境就配置正常了。

我的博客网站地址:http://www.moguiweb.com.cn

展开阅读全文

没有更多推荐了,返回首页