zoukankan      html  css  js  c++  java
  • windows下React-native 环境搭建

    公司决定试水react-native,mac审批还没下来,没办法,先用windows硬着头皮上吧。

    参考文章:

    React Native 中文网官方文档

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

    安装windows环境##

    • Java Development Kit [JDK] 1.8+
    • Python 2
    • Node
    • react-native-cli (React Native命令行工具)

    先把jdk1.8+、Python2、node安装了,这三个不分先后,安装完毕记得添加环境变量,这里就不多说了。详细情况可以参照:

    搭建Java开发环境

    Node官网

    python官网

    你也可以使用Chocolatey,它是一个Windows上的包管理器,类似于linux上的yum和 apt-get。

    安装Chocolatey:

    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin
    

    安装Python 2:

    choco install python2
    

    安装Node:

    choco install nodejs.install
    

    安装react-native-cli:

    npm install -g react-native-cli
    

    搭建Android开发环境

    下载Android sdk tools ,它是一个Android sdk 管理工具。点此下载

    下载安装完毕后,选择SDK Manager打开,下载以下package:

    • 在Android 6.0 (Marshmallow)中勾选:

      • Google APIs
      • Intel x86 Atom System Image
      • Intel x86 Atom_64 System Image
      • Google APIs Intel x86 Atom_64 System Image
    • 在SDK Tools中勾选

      • Android SDK Build-Tools 23.0.1。(必须是这个版本

    安装完毕后,添加ANDROID_HOME环境变量。至此,大功告成。

    安装Android模拟器

    官方推荐Genymotion模拟器,我使用了下,确实很好用,并且它对个人是免费的(要注册)。点此下载

    • genymotion需要依赖VirtualBox虚拟机,下载选项中提供了包含VirtualBox和不包含的选项,请按需选择)。

    • 打开Genymotion。如果你还没有安装VirtualBox,则此时会提示你安装。

    • 创建一个新模拟器并启动。

    • 启动React Native应用后,可以按下F1来打开开发者菜单。

    run

    初始化react-native项目

    react-native init <projectName>
    

    启动项目(打开模拟器)

    cd <projectName>
    react-native run-android
    

    这一步会启动服务并在模拟器上安装项目apk。如果在模拟器上看到你的app了,则表示成功了。

    如果在你运行react-native run-android命令后,Packger可能不会自动运行,这时可以手动运行:

    react-native start
    

    判断package运行成功与否可以通过访问:http://localhost:8081/index.android.bundle?platform=android。如果能打开页面则表示启动成功。

    在模拟器上打开项目app,然后摇一摇手机(模拟器有摇一摇按钮),或者直接输入ctrl+m打开调试窗口,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口,输入你的电脑的ip地址,并加上8081端口号。点击确定,重启app。这时你就能看到react-antive界面了。

  • 相关阅读:
    APIO2019游记
    ZJOI2019赛季回顾
    「HNOI 2019」白兔之舞
    LOJ #6539 奇妙数论题
    BZOJ4314 倍数?倍数!
    伯努利数学习笔记&&Luogu P3711 仓鼠的数学题
    BZOJ 5093[Lydsy1711月赛]图的价值 线性做法
    AtCoder Grand Contest 030题解
    Codeforces Round #542 (Div. 1) 题解
    Codeforces Round #541 (Div. 2)题解
  • 原文地址:https://www.cnblogs.com/yzg1/p/5780026.html
Copyright © 2011-2022 走看看