zoukankan      html  css  js  c++  java
  • windows安装React Native开发运行环境

    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版本要一样)

      sdk安装项目

    安装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 eact-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,时间较长)
    • 法二(推荐):
      • 打开DemoProjectandroidgradlewrapper目录下的gradle-wrapper.properties文件
      • 将distributionUrl后面的链接改为国内镜像地址 http://mta.zttit.com:8080/images/gradle-2.4-all.zip
      • 进入项目目录DemoProject,输入react-native run-android(不要关闭package的命令行)。此时bluestacks已经安装上了此应用,如果没有可以在DemoProjectandroidappuildoutputsapk目录下找到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疑难点,问题深坑最强总结帖(不断更新中)

  • 相关阅读:
    【codecombat】 试玩全攻略 第二章 边远地区的森林 一步错
    【codecombat】 试玩全攻略 第十八关 最后的kithman族
    【codecombat】 试玩全攻略 第二章 边远地区的森林 woodlang cubbies
    【codecombat】 试玩全攻略 第二章 边远地区的森林 羊肠小道
    【codecombat】 试玩全攻略 第十七关 混乱的梦境
    【codecombat】 试玩全攻略 第二章 边远地区的森林 林中的死亡回避
    【codecombat】 试玩全攻略 特别关:kithguard斗殴
    【codecombat】 试玩全攻略 第二章 边远地区的森林 森林保卫战
    【codecombat】 试玩全攻略 第二章 边远地区的森林
    实验3 类和对象||
  • 原文地址:https://www.cnblogs.com/oldinaction/p/5316703.html
Copyright © 2011-2022 走看看