React Native是什么

React Native是facebook开源的一个用于开发app的框架。React Native的设计理念:既拥有Native (原生) 的用户体验、又保留React的开发效率。这个理念似乎迎合了业界普片存在的痛点,自2015年9月份开源不到1周github star破万。

虽然React Native官方声明开发需要使用mac本,但是如果只是想用React Native来开发一个android应用,也是可以在windows下进行的。

React Native配置开发运行环境

安装java运行环境

此处省略,网上教程一大堆,通过java -version检查是否成功。

安装android SDK

  • android SDK下载地址:AEZO.CN备份 (提取码:3fb4)
  • 在sdk的安装目录运行SDK Manager,选择以下项目,再点击install packages(注意勾选的SDK platform-tools和SDK Build-tools版本要一样)

安装bluestacks

  • 下载地址:bluestacks
  • 安装完成后,电脑上就可以跑app程序了

安装nodejs

React Native是基于js的,node.js是轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本

  • 下载地址:nodejs
  • 使用node -v(显示版本号)检查是否安装成功

安装react-native命令行工具react-native-cli

  • 下载React Native:React Native 点击Download ZIP进行下载
  • 将文件解压到某目录,如:D:\software\react-native
  • 在命令行进入到react-native目录下的react-native-cli,运行命令npm install -g,安装好之后,可以在命令行运行react-native命令了。安装得一会,如果一直没反映,重启CMD再次运行

创建RN(React Native)项目

  • 命令行进入你希望创建项目的目录后,输入react-native init DemoProject,等待一段时间(较慢)

运行package

  • 在命令行中进入项目目录DemoProject,输入react-native start,等待一段时间
  • 这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了

运行项目

  • 启动bluestacks,或者将手机连接到电脑(手机要启动USB调试模式,命令 adb devices 可以查看当前设备)
  • 刚刚运行package的命令行不要关闭,重新启动一个新的命令行
  • 法一:
    • 进入项目目录DemoProject,输入react-native run-android
    • 等待运行(如果是第一次运行,首先会下载gradle,时间较长)
  • 法二(推荐):
    • 打开DemoProject\android\gradle\wrapper目录下的gradle-wrapper.properties文件
    • 将distributionUrl后面的链接改为国内镜像地址 http://mta.zttit.com:8080/images/gradle-2.4-all.zip
    • 进入项目目录DemoProject,输入react-native run-android(不要关闭package的命令行)。此时bluestacks已经安装上了此应用,如果没有可以在DemoProject\android\app\build\outputs\apk目录下找到app-debug.apk文件即是生成的安装包

访问应用

  • 第一次手机肯定报错
  • 这时候点击bluestacks左边菜单栏的抖动(如果直接连接手机,摇一摇手机即可),点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。这里的IP是电脑的IP,不知道的可以在命令行中输入ipconfig进行查询,端口号固定8081
  • 设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
参考

[1] 史上最详细Windows版本搭建安装React Native环境配置
[2] React Native疑难点,问题深坑最强总结帖(不断更新中)

windows安装React Native开发运行环境的更多相关文章

  1. Windows 安装react native

    1.下载node.js (https://nodejs.org/en/) 2.安装node.js,安装完成后按住 图标键+R ,输入CMD进入命令行终端,输入npm -v C:\Users\Admin ...

  2. Windows下React Native开发01 -- Android开发环境搭建

    1.安装jdk 推荐将JDK的bin目录加入系统PATH环境变量(自己百度下怎么配置). 2.安装SDK 直接安装 Android Studio  推荐从AndroidDevTools下载.(也可以直 ...

  3. React-Native(二):React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

  4. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

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

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

  6. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  7. Windows版本搭建安装React Native环境配置

    1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...

  8. React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

    [React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...

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

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

随机推荐

  1. 【bzoj2300】[HAOI2011]防线修建 离线+STL-set维护凸包

    题目描述 给你(0,0).(n,0).(x,y)和另外m个点,除(0,0)(n,0)外每个点横坐标都大于0小于n,纵坐标都大于0. 输入 第一行,三个整数n,x,y分别表示河边城市和首都是(0,0), ...

  2. 【JavaScript】获取项目路径地址

    在jsp页面顶上面定义 <% String path = request.getContextPath(); String basePath = request.getScheme() + &q ...

  3. BZOJ4999 This Problem Is Too Simple!(树上差分+dfs序+树状数组)

    对每个权值分别考虑.则只有单点加路径求和的操作.树上差分转化为求到根的路径和,子树加即可.再差分后bit即可.注意树上差分中根的父亲是0,已经忘了是第几次因为这个挂了. #include<ios ...

  4. pthread的pthread_join()函数理解实验

    一.使用方式 pthread_t tid;pthread_create(&tid, NULL, thread_run,NULL);pthread_join(tid,NULL);创建线程之后直接 ...

  5. ZJOI 2017 day2 4.27

    明天就要比赛啦,今天早点休息. 既然是随便扯,首先就是yyzx的wifi(宁波的这种wifi系统我第一次见,要打开任意一个浏览器,才能跳出界面,网还是挺快的) 上午是学车的翁伊嘉&猪猪侠讲课, ...

  6. Flash平台的分析与RIA的趋势

    10月3号,Flash Player 11 和 AIR 3.0正式提供下载,一片安静.最近这两年来,关于Flash的新闻一向是以负面为主,先是 Silverlight 的挑战,然后是 iphone和i ...

  7. PID控制算法的C语言实现三 位置型PID的C语言实现

    上一节中已经抽象出了位置性PID和增量型PID的数学表达式,这一节,重点讲解C语言代码的实现过程,算法的C语言实现过程具有一般性,通过PID算法的C语言实现,可以以此类推,设计其它算法的C语言实现. ...

  8. Codeforces 585.D Lizard Era: Beginning

    D. Lizard Era: Beginning time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  9. python学习笔记(六) 函数式编程

    一 函数对象 函数同样可以作为对象复制给一个变量,如下: f = abs; print(f(-10)) f = 'abs'; print(f) def add(a,b,f): return f(a) ...

  10. mysql 自动记录数据最后修改时间

    原文 -- mysql ,还真有这样的说法: mysql> create table test( ), -> uptime timestamp on update current_time ...