• 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疑难点,问题深坑最强总结帖(不断更新中)

  • 相关阅读:
    Git使用教程
    H5项目常见问题汇总及解决方案
    globalAlpha 示例
    canvas 绘制三次贝塞尔曲线
    canvas 绘制二次贝塞尔曲线
    html5 图片360旋转
    HTML5 arc的例子
    HTML5 绘制阴影
    HTML5 canvas绘制文本
    html5 lineTo的使用例子
  • 原文地址:https://www.cnblogs.com/oldinaction/p/5316703.html
Copyright © 2020-2023  润新知