• React Native for Android on Windows 配置开发安装总结


    配置开发安装总结(由于当前react-native更新较快,目前是针对2015年11月底时的reacti-native android for windows版本,有些内容可能过时)
    但是在Windows下安装远没有这么简单。下文是在window7 x64下的安装体验。
     
    目录:
    1、开发IDE:Webstorm
    2、开发环境安装、配置
    3、初始化工程
    4、初始化工程时遇到的一些问题
    5、初始化成功后,开发中常见的一些问题
     
    1、开发IDE:webstorm
    当前sublime或者webstorm都较为优秀,本文选用webstorm,建议用最新的11版本
    1)es6语法支持
         由于常常用es6语法,在setting-》Languages & Frameworks-》JavaScript-》Libraries。勾选 ECMAScript 6。
    2)增加对JSX语法支持。
    在setting-》Languages & Frameworks-》JavaScript
         
     
     
    这时代码区域不会报语法错、格式化也会自动对齐等,例如:
     
     
    2、开发环境安装、配置 (没有可靠翻墙的同学请浏览完本文后慎行)
    1)npm和node升级
         npm:npm升级到最新版本,这个很有必要,npm update –g
         node:react native官方要求node>=4.0,建议直接安装node的最新版本(官网下载很慢,而且几乎很难成功,我这里有个云盘上的5.0 64x版本地址:https://yunpan.cn/c3TcJvAbHDuBW (提取码:ca15))
     
    2)安装JDK
    可直接去官网上下载:
    注意X86版本还是X64版本。
     
    配置好jdk环境变量:
        例如我的jdk安装地址为:C:Program Files (x86)Javajdk1.8.0_60in
        系统变量-》新建 JAVA_HOME 变量,值为:C:Program Files (x86)Javajdk1.8.0_60in
        然后再把JAVA_HOME添加到PATH中。%JAVA_HOME%
     
    3)安装Android SDK
     

    安装sdk-manager 和sdk:

     
     

    或者上360软件管家

     
     
    设置Android的环境变量:
         设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => D:Program FilesAndroid SDK Tools)
         设置环境变量PATH:例如:(PATH => %ANDROID_HOME% ools;%ANDROID_HOME%platform-tools)
     
     
    4)安装android sdk packages
    android sdk安装完毕之后,打开SDK manager,需要安装一些工具、扩展以及android版本。
         建议Tools和Extras全勾选(官方文档中推荐只安装一些固定包)
         android版本根据需要选择安装(选一两个就成,每个都上G,下图我安装了6.0和5.1.1)
         然后漫长的安装......
         这里可以设置镜像,加速下载,例如:http://www.cnblogs.com/liongis/p/3659813.html
     
     
    5)安装android模拟器(如果是真机调试,这一步就不需要了)
    可以选用官方推荐的模拟器,Genymotion(https://www.genymotion.com/),此模拟器之前在mac下配合visual box使用过,启动很快
    下边是使用android的自带的avd创建模拟器:
     
     
    创建完毕后,选择一个模拟器,点start即打开模拟器,在模拟器上有几个常用的快捷键:
        F2:即打开react-native开发工具栏
        Home:相当于android的home
        Esc:相当于退出
     
     
    6)之后就是安装react-native
    npm install react-native-cli -g ( 需要命令行 git)
     
    3、初始化工程
    构建一个名为hello的react-native工程,理想的正常的步骤:
    1)到工程开发目录下  react-native init hello
    2)以上成功后,然后在hello目录下,命令行 运行react-natvie start或者npm start
         此处启动React Chrome Developer Tools需要的一个远程调试服务,有点类似于Weinre。启动之后,可以访问http://localhost:8081/debugger-ui看下
    3)在hello目录下,命令行运行react-native run-android,如果成功在模拟器或者真机上启动了应用,即初始化成功了
         此时需要提前把android模拟器打开或者真机usb连接到电脑。
     
         但是实际上,往往会出现很多问题,即如下部分的内容。
     
     

    4、初始化工程时遇到的一些问题

     
    主要就是一些外部依赖或者网络问题。建议安装一些内容,基本就避免下边的错误。要安装的依赖:
        git
        node(4.0以上版本)
        npm(用最新版本)
        python(2.5~3.0)
        java jdk,android sdk( 各种package)
        .net framework 2.0 SDK
     
    如果没有上边内容,可能报以下我遇到的问题:
    1)带命令行的git。如果安装完没自己加入环境变量path中,需要自行添加。
    2)需要安装python(版本必须在2.5~3.0之间),之前我装的是3.4.3版本,无奈只好退回到2.7,并加入环境变量
     
    3)需要安装.net framework 2.0 SDK, visual studio 2005(事实上,只要高于这个版本就成),否则在react-native start时会提示如下
     
    4)在react-native run-android时,好几次就报一个okhttp.jar错误,不要气馁,找个好点的翻墙软件,多试验几次就ok了
     
     
    5)初始化工程时会碰见停在如下地方,....此处可能需要长时间等待 。超时时间 运行大概10分钟,如果超时后提示下载失败,再实验几次(我在此处重试了好几次)
     
     
     
    喜大普奔的是,这个只需要下载一回,之后这个项目再运行时,就不需要下载这么多东西了。如果下载过程出错,再运行下载时,已下载成功的包,无需再下载了。
    另外,如果一直下载不成功,可以借用我在云盘上的一个测试工程:https://yunpan.cn/c3TBeBI39t57q (提取码:a98d)
              下载下来后,在模拟器或者真机上安装此文件夹下的apk:helloandroidappuildoutputsapk
               然后就可以用此hello做测试开发,只是工程名只能叫hello了,也许只需将node-modules拷贝到你的工程目录下即可(目前没测试)。
     
     
    5、初始化成功后,开发中常见的一些问题
    1)只能开一个模拟器,如果真机usb调试打开,需要关闭。在cmd中运行,adb devices,保证只有一个设备:
     
    2)Debug server host for device设置
    关于红屏幕,只要出错,模拟器会在屏幕上提示错误,此处如果run-android、提示如下错误。
    需要设置下:按F2-》Dev Settings-》Debug server host for device ,设置一个Debug server host for device为你电脑的ip地址。
     
     
    3)关于React Chrome Developer Tools的使用。
    现在就是react native在chrome的扩展工具React Chrome Developer Tools目前在windows下还是无法使用
    http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html ),当运行 react-native start时,在浏览器中键入http://localhost:8081/debugger-ui,会报一个如下的错误。
     
     
    但是可以代理android的日志:启用Debug in Chrome,可在控制台看android程序的日志。
    此处推荐可用android的ddms工具或者monitor也可以查看日志:
         具体位置在android的sdk/tools中(如:D:Program Files (x86)Androidandroid-sdk ools),在cmd中运行:ddms或者monitor后,可查看当前应用的调试日志,例如如下:
     
     
    4)远程调试服务经常挂掉:
         控制台常常会提示一些挂掉原因,一般只需重启就成,这个会常常挂掉。
         此时模拟器或者真机中报如下connect错误,需要重新运行下react-native start或者npm start
     
     
     
     
  • 相关阅读:
    vue-cli模拟后台数据交互
    打卡谱
    前端面试题
    ps简单切图
    常见浏览器兼容性问题与解决方案
    扯淡 测量体质公式 哈哈哈哈会不会封我号
    JAVASCRIPT 转换字符串杂记
    日记(六)
    gitshell 基础操作
    gitshell fork别人项目
  • 原文地址:https://www.cnblogs.com/withasi/p/5066482.html
Copyright © 2020-2023  润新知