zoukankan      html  css  js  c++  java
  • React Native 入门笔记一 -- Windows下基本环境配置

    一、准备工作

    首先,需要安装nodejs,可以从nodejs官网下载,注意,React Native 要求node版本在4.0或以上;否则会出错,我建议把node版本升到最新版本,防止后面出现各种莫名其妙的问题,我这里安装的版本是v6.9.3LTS的,安装之后npm也一并安装好了,可以运行命令查看当前node版本和npm版本;

    node -v
    v6.9.2
    
    npm -v
    3.10.9
    

    注意:由于众所周知的原因,国内一些网站无法打开,所以建议先打开VPN等翻墙软件,我这里用的是蓝灯,这里一定要注意,否则后面的步骤无法进行; 

    二、正式开始

    安装Android Studio并配置Android虚拟机

    1、下载Android Studio安装包,然后进行安装,安装的过程很简单,直接点下一步即可;安装的过程可能要等待数十分钟,直到点Finish完成;

    2、进行环境变量的配置:

    a、添加ANDROID_HOME环境变量:

    b、将Android SDK的Tools目录添加到PATH变量中

    你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。

    3、打开命令行窗口,输入android,进入到Android SDK Manger,下载我们需要的SDK;

    • Tools/Android SDK Tools (24.3.3)

    • Tools/Android SDK Platform-tools (22)

    • Tools/Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1

    • Android 6.0 (API 23)/SDK Platform (1)

    • Extras/Android Support Library(23.0.1)

    • Extras/Android Support Repository

    4、切换到Android 6.0选项卡,注意:必须选择这项,因为React Native目前必须要这个版本的,然后就是等待下载并安装,安装完成后关闭就行,Android SDK Build-tools必须选择23.0.1,否则后面会出现错误 ;

    5、下载进行安卓虚拟机的配置,当然,也可以用真机进行测试,首先打开Android Studio,新建一个空白工程,根据实际需要,选择合适的工程目录(project location),强列建议工程目录不要建在C盘,我这里选择的是D盘,其它的采用默认配置即可;

    6、点击顶部菜单栏手机图标进行下一步,选择一个模拟设备;

    7、点击上图中绿色的三角图标,就可以打开虚拟机了; 

    8、至此,Android相关的配置工作就结束了,下面进行React Native工程的构建; 

    三、创建React Native工程

    1、打开命令行窗口,在弹出的命令框当中输入以下指令,回车

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    

    2、可以运行下面命令,查看NPM库是否切换为阿里源;

    npm config get registry
    

    3、安装react-native命令行工具

    npm install -g react-native-cli
    

    4、创建项目,进入工作目录,运行

    cd D:
    eact-native-demos
    react-native init AwesomeProject
    

    并耐心等待数(或数十)分钟。

    5、运行packager

    react-native start
    

    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

    6、运行模拟器,保证模拟器处于打开状态;

    7、安卓运行,保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

    react-native run-android
    

    首次运行需要等待数分钟并从网上下载gradle依赖。最好提前把VPN等翻墙软件打开,确保网络连接状态良好可以下载;运行完毕后可以在模拟器或真机上看到应用自动启动了。

    成功后手机界面:

    8、接下来就可以用Android Studio或者Webstorm等开发工具进行开发了!

  • 相关阅读:
    Linux内核网络协议栈优化总纲
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 判断字符位置
    Java实现 蓝桥杯VIP 算法训练 判断字符位置
    Java实现 蓝桥杯VIP 算法训练 链表数据求和操作
  • 原文地址:https://www.cnblogs.com/jone-chen/p/6248465.html
Copyright © 2011-2022 走看看