一、目标平台 windows+android

    1. 必须软件

      python2+

      nodejs

      npm

    2. 安装react-native命令行

      $ npm install -g react-native-cli

    3. 搭建安卓环境

      (1)React Native目前需要Android Studio2.0或更高版本, Android Studio需要Java Development Kit [JDK] 8(注意暂不支持更高版本)

      (2)官网上下载Android Studio即可, JDK选择jdk-8u161-windows-x64.exe,目前jdk已经升级到10,切记不能选择高于8版本

      (3)运行项目需要安卓手机或者模拟器(自行百度,安装需要空间较大)

      (4)初始化安装后可以选择"custom"自定义路径和组件(建议所有组件勾选,安装到D盘目录)

        

      (5)安装完成打开AS欢迎界面右下角选择 Configure | SDK Manager

        

      在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。(不同设备可能需要SDK Platfrom版本不一样,等到最后运行报错提示时再回来安装即可)

        

      在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository.

        

      (6)配置环境变量分两步(不能少)

        一、将SDK的路径添加

          高级系统设置 > 高级 > 环境变量(系统变量S) > 新建 >

              变量名 : ANDROID_HOME

              变量值 : D:\Users\Administrator\AppData\Local\Android\Sdk(实际的SDK下载位置)

        二、将jdk8,platform-tools,tools添加环境变量PATH ,(此处是都安装到D盘下,实际情况根据安装目录而定)

            D:\Program Files\Java\jdk1.8.0_161\bin

            D:\Users\Administrator\AppData\Local\Android\Sdk\tools

            D:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools

        三 、检查jdk安装是否成功 : $ javac -version

       (7)连接手机

          打开手机开发者选项: 设置 》 更多设置》 关于手机 》软件版本号上连续点击7次以上即可开启 "开发者选择"

          打开手机USB调试 : 设置 》更多设置 》开发者选项(一般在最下边) 》开发者选项打开,USB调试打开

          手机连接电脑 : 自动安装驱动,如失败,建议下载手机助手或者豌豆荚连接手机时会安装驱动,此处使用电脑管家工具安装连接

          注意 : 手机第一次连接电脑时,手机首页上会弹出调试对话框,需确定方可连接电脑,如错过提示,可反复多次连接手机

        

          

         最后 : 打开命令行工具检测手机是否连接成功 $ adb devices, 显示devices序列号即为连接成功

          

       (8)构建项目

          1. 初始化并安装依赖, 如依赖安装不完全,先删除node_modules后在根目录下重新 $ cnpm install

          

          2. 启动项目

          $ react-native run android (首次运行需下载gradle依赖, 小数点表示下载进度, 由网络质量决定速度)

          

          

          

          下载到最后会新弹出nodejs服务器窗口 (此窗口为项目开启一个服务器环境,可以在localhost:8081上运行), 此时手机上会自动打开App

          

          

          手机上的APP

          

  4. 最后, 使用开发工具 (AS 或者 Webstorm), 在APP.js上修改代码,在手机上触摸左下角的菜单键弹出窗口点击Reload即可更新修改

    

      

    

      

            

          

      

Windows搭建react-native开发环境的更多相关文章

  1. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

  2. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  3. 【RN - 基础】之Windows下搭建React Native开发环境

    前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...

  4. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  5. 在Mac上搭建React Native开发环境

    概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...

  6. [转] 在Mac上搭建React Native开发环境

    原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述 前面我们介绍过在window环境下开发React Native ...

  7. Mac下搭建react native开发环境

    安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL htt ...

  8. 搭建基本的React Native开发环境

    步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Home ...

  9. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. [转载]Sublime Text 3 搭建 React.js 开发环境

    [转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

随机推荐

  1. jQuery 报错,对象不支持tolowercase属性或方法

    泪流满面.<input>里id和name都不能是nodeName,否则跟jquery.js冲突 JQuery 实践问题 - toLowerCase 错误 在应用JQuery+easyui开 ...

  2. [development][libhtp] libhtp 启用debug模式

    可以使用 ./configure --help 查看帮助. 可以通过参数, 修改配置. 即对应的Makefile内容. 也可以修改 configure.ac 里的内容, help中的部分内容, 也依赖 ...

  3. 内部排序->插入排序->直接插入排序

    文字描述: 将一个记录插入到已排好序的有序表中,从而得到一个新的.记录数增1的有序表 示意图: 算法分析: 时间复杂度为n*n,辅助存储为1,是稳定的排序方法. 代码实现: #include < ...

  4. Fiddler怎么可以抓取https的请求包

    对于https的协议是带有安全的功能,所有有一些的https的协议是无法抓到的,所以需要通过设置filler中来对,来使用filler的方式的来抓取到https的请求包,那么如何使用filler中抓取 ...

  5. 初识jmeter(2)

    1.层级关系: 聚合报告1记录HTTP请求1的结果: 聚合报告2记录HTTP请求2的结果: 聚合报告记录所有线程组中HTTP请求的结果. 2.线程同时启动(并发) 一是可以在把线程组里面的 Ramp- ...

  6. Python开发【笔记】:aiohttp搭建简易聊天室

    简易聊天室: 1.入口main.py import logging import jinja2 import aiohttp_jinja2 from aiohttp import web from a ...

  7. Java如何对List集合的操作方法(二)

    4.list中查看(判断)元素的索引: 注意:.indexOf(): 和  lastIndexOf()的不同:   ///*************************************** ...

  8. P1896 [SCOI2005]互不侵犯 状压dp

    正解:状压dp 解题报告: 看到是四川省选的时候我心里慌得一批TT然后看到难度之后放下心来觉得大概没有那么难 事实证明我还是too young too simple了QAQ难到爆炸TT我本来还想刚一道 ...

  9. 【PyQt5-Qt Designer】QDoubleSpinBox-小数微调框

    QDoubleSpinBox-小数微调框 总体说明 大部分的总体说明和QSpinBox的差不多(详见:<PyQt5:微调框1>),这里主要把有差别的地方谈一下(三点). QDoubleSp ...

  10. 运行vs2010,Debug时发生“无法启动程序"http://localhost:xxx",系统找不到指定文件

    网上参考回答:应该是Visual Studio不能启动浏览器导致的结果!第一种结果是没有设置默认的浏览器,第二种情况是注册表被修改了! 我的尝试: 1.在启动处点击下三角,选择“使用以下浏览器浏览” ...