• 作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发其实我对react-native这新玩意懂得不多,只知道它很强大,可以实现跨平台运行啦~所以得抓紧时间布置开发环境来学习...

    (前言)

    作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发奋斗其实我对react-native这新玩意还挺感兴趣的,知道它很强大,可以实现跨平台运行啦~所以得抓紧时间布置开发环境来学习学习了,说实话,Windows开发起来确实没有苹果的Mac OSX方便,很多开发环境都要自己去搭,也开发不了ios应用 = = 不过没关系,环境能搭就能开发,慢慢来嘛。下面是详细的搭建方法和各种填坑的分享。生气非常欢迎各路大神能指点一下和提供点建议,同样欢迎和我一样对react-native充满兴趣也是刚上手的童鞋一起来交流学习大笑

    第一步(安装基础软件)

    1.安装Python2.7,可到官网下载(注意目前不支持Python 3版本)==>>Here 

    2.安装Node.js 同样到官网下进行下载,还有中文官网,非常nice,(注意下载最新v6.10.2即可)==>>Here
     
         安装node都是下一步下一步,安装完后建议设置npm镜像以加速后面的过程(除非你翻墙,哈哈)
     打开cmd,输入node -v 看看有没有显示版本,能显示版本就证明安装成功了,图如下
     
     然后继续输入
                             npm config set registry https://registry.npm.taobao.org --global
                             npm config set disturl https://npm.taobao.org/dist --global
     上面两条语句主要是切换成淘宝团队的镜像(感谢淘宝团队),大大增加了在国内npm安装模块的速度
     好了,第一步就完成啦~
     

    第二步(安装React-Native Cli和Android Stdio)

     1.来来来,让我们安装react-native cli,方法很简单,打开cmd,输入npm install -g react-native,这样就安装好了,react-native命令也可以使用啦!惊讶

     2.安装Android Stdio略为复杂,因为AS需要JDK1.8或者更高的版本,因此在AS之前先把JDK环境给布局好
     下载JDK==>>Here
       
     下载对应的系统位数版本就可以了生气
    安装JDK,第一次是安装JDK,第二次是安装jre.建议两个都安装在同一个java文件夹中的不同文件夹中。留意一下JDK安装的目录就行了.
    配置JDK环境,

    (1)计算机→属性→高级系统设置→高级→环境变量

    (2)系统变量→新建 JAVA_HOME 变量 。变量值填写jdk的安装目录

    (3)系统变量→寻找 Path 变量→编辑,在变量值输入%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)

    (4)系统变量→新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)

    好了,JDK配置完成之后,就来下载安装Android Stdio吧==>>戳我下载


    我下载的是2.1版本,我第一次下了最新的2.3版本装完后加载不了,所以卸载重新装了偏老一点的版本,不知道是不是我电脑的问题,你可以尝试下载新版本(只要是2.0以上的版本react-native都支持的)

    (注意,在安装时不要改动安装的内容,全部都勾选安装,尤其是Android SDK和Android Device Emulator。)
    (安装过程的图片我暂时就不截了,你可以按我说的一步一步来,毕竟我喜欢用语言来表达(唉,其实就是想偷懒...)
    在安装android stdio时,全部内容都勾选,下一步下一步,然后,等待安装.
    初步安装完成后,会弹出一个安装项,选择Custom安装项,然后继续下一步即可.

    安装完成后,有3步要干的.

    1.在Android Studio的欢迎界面中选择Configure,再选SDK Manager注意了,一定要配置好SDK,在SDK Platforms窗口中,选择Show Package Details(要注意啊,很重要,之前我掉进这里了),然后在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(加油,细心点)

    2.在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。(必须是这个版本)

    3.新建ANDROID_HOME环境变量, 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径.(方法和JDK那里很像啪)
     还有在PATH变量前面添加%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
     

    我之前在增加完变量后,react-native命令不起作用了,后来重新安装react-native解决了此问题.

    打开安装好的android stdio,然后start一个项目,下一步下一步,然后找到这个按钮,这个是启动模拟器的键,如果没有安装模拟器的话,可以选一个手机型号来下载,找到对应你的电脑的系统位数,来安装就行了,装完就开机等待,年轻人,要有耐心啊...偷笑

       

    开启完成后,在cmd里面敲adb devices,可以看到目前连上的设备,图中可以看到emulator-5554,没错,这就是传说中的模拟器......


    好啦,就先开机放在着晾着先,等我们开启RN的时候再玩你大笑,那么,第二大部也完成啦!

    第三步(造出你的第一个RN项目)

     创一个你想起什么名都行的文件夹,然后在cmd下cd进去,在此文件夹下,输入react-native init XXX(也是你随便你起的名字,但是第一次的话,建议写AwesomeProject,别问我为什么,因为官当文档是这样写的哈哈哈),因为文件比较大,可能会有点慢,请耐心等待哈

    成功后,cd进入帅气的文件名------AwesomeProject,然后就敲下最666的命令----react-native run-android

    接着,继续等,因为它要装gradle...(最好还是挂下VPN吧,不然真的很慢)

    编译时,会弹出2个窗口,一个是开启服务器的


    一个是编译成功后的


    如果你的和我一样,那么,恭喜你!微笑


    如果你的出现了红屏,请先按ctrl+m,然后选Reload,看看能不能成功,如果还是红屏,请你再按一次ctrl+m,然后选最后一项,也就是Dev Settings,然后点Debug server host&port for device,敲下你的ip地址+:8081,(如何看到本机的ip地址?==》》cmd -> 敲ipconfig -> IPV4显示的就是你的电脑ip地址),如果你的ip地址是192.1.168.123,那就敲下192.1.168.123:8081,然后再Reload一次!祝你好运!

    第四步(让你的手机上运行React Native)

      说实话,我这里遇到了不少坑,不过都一一填好了,每次填坑都是收获吧,下面我来说说具体的填坑过程。

      1.先把模拟器关闭(因为会有影响),然后用你的手机(记得是android系统的哦)接上电脑,打开手机的USB调试,然后电脑就在安装你的手机驱动了,我的手机很蛋疼,不会自动说,我只好搞了个应用宝(豌豆荚之类的都可以)来装驱动,装好驱动后,我那蛋疼的手机一直在向我电脑发射弹窗指令,很影响调试哭打开cmd继续输入adb devices,你会看到:


    手机已经连接上啦生气

    接着你可以进行AwesomeProject文件夹下进行react-native run-android试试,如果你手机比较厉害的话,一次就能成功安装了,只不过是红屏偷笑我手机比较傲娇,在编译时,直接给我BUILD FAILED了,原因我也找到了,听说很多国产机都这样,我的是魅族的,所以,来一起填坑吧!

    1.将 android/build.gradle 里的 gradle:1.3.1 改为 gradle:1.2.3

    2.将 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改为gradle-2.2-all.zip

    保存,重新react-native run-android,等待,手机保持亮屏状态,编程成功后,你手机会看到


    不用担心,改改就好,摇下手机,选择设置项,跟前面说的设置好网络地址Reload就好了!(有个很重要的前提是手机要连wifi,一定要和电脑处在同一个局域网上)

    我还遇到个坑,编译完一打开app,就是白屏,遇到这情况的童鞋不要慌,请你悄悄地去手机应用管理上,把刚才安装的AwesomeProject的桌面悬浮窗的权限改成允许就可以啦~~

    还有一个坑,如果你的手机出现了Could not get BatchedBridge, make sure your bundle is packaged correctly不要怕,先Reload一下,再去网络地址应该就可以了。

    对了,还要说下,如果童鞋不喜欢设备调试,喜欢模拟器调试的话,只要把将 android/build.gradle 里的 gradle:1.2.3 改为 gradle:1.3.1,然后打开模拟器,再run一次就可以了。安静



    小结

    因为没什么经验加上之前没搞过安卓开发,所以对Android Stdio比较陌生,SDK的配置开始也是懵懵哒,幸好中间请教了下同事,感谢他的帮忙,让我填坑的效率高了好多吐舌头搭建好环境是学习框架的基础,react-native还是很有潜力的,因为比较新,所以很多东西都没完善吧,官方也在努力更新,相信会越来越好,我很看好react-native,所以我也会在学习react-native的过程中,多跟大家分享学习的心得。

    参考了网上的一些资料,感谢简书上的教程江清清的技术专栏,还有react-native官方的文档也非常不错。

    还有建议开发react-native还是用Webstrom2017吧,超强大的IDE,最新版也支持react-native语法了,除了启动有点慢之外其他的都真的很棒!

    这是我第一次写博客,希望能帮助正在学习搭建react-native环境中童鞋们微笑








    展开全文
  • 因为后边要做rn项目,所以...react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -ve...
  • react-native项目编译时遇到react-native-community/masked-view 错 react-navigation问题 例如: Error: undefined Unable to resolve module @react-native-community/ masked-view from 'node modules\react-...
  • 网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,很可能是有问题的;另一方面,对配置和运行中出现的问题没有详细介绍怎么解决(也可能是人家运气好,没有碰上)。 我...
  • react-native之初识react-native 2017-07-28 17:42:57
    其实对react-native已经仰慕许久,但是由于工作太忙,加上自己的懒惰,迟迟没有着手学习,但是随着react-native日渐成熟,跨平台技术优势的...(1)react-native中文网地址:http://reactnative.cn (2)react-nati
  • React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发...
  • 最近接手了一个react-native项目,用xcode运行的时候,各种坑,各种报错,现在抽时间整理一下 1.找不到头文件 RCTJPushModule.h 一上来就报这个错,翻阅一些资料找到解决办法 打开终端,cd到项目文件夹,输入 ...
  • 前言:顾名思义 React-native-device-info 本第三方就是为了 获取设备信息。 实际上react-native有很多类似第三方,并且使用方式和本例大体相同。作为示例记录下,供有需要的同学学习: 1,初始化项目: 初始化...
  • 在终端使用命令react-native run-android报错,如下图所示:其中说到No connected ...,我便猜测是不是需要先打开android模拟器,于是就先启动android模拟器,再接着执行命令react-native run-android果然运行成功。...
  • npm install jpush-react-native --savenpm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native 一、自动配置部分(以下命令均在你的 REACT NATIVE PROJECT.....
  • react-native 运行项目 2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上...
  • 2、react-native link react-native-vector-icons 进行自动连接,如果报错,react-native unlink react-native-vector-icons这样先卸载掉之前的link,然后: 命令运行:pod 'RNVectorIcons', :path => '../node_...
  • react-native 样式总结 2019-06-06 10:33:54
    React-Native的布局是完全是用flex来实现。 flex的用法就不多说了,具体可参考阮一峰老师的这篇文章《flex布局:语法篇》,里面对flex的讲解非常详细; 需要注意的是:React-Native中的flex的相关属性不是完全依照...
  • react-native开发之深坑 2018-05-30 23:49:32
    当配置react-native成功后,非常开兴,并成功的在真机上运行出结果,然而,第二天接着昨天的项目开始时,却出错了进入昨天创建的项目中,用react-native run-android运行时,出现上面结果,昨天可以正常运行,但,,...
  • react-native-baidu-map 获取百度地图API_KEY 地址:http://lbsyun.baidu.com,在控制台成功创建应用后,就可以看到应用的api key了 安装 yarn add react-native-baidu-map 原生部分 Android配置 react-native ...
  • react-native-s-alipay React Native 支付宝模块,同时支持ios和android,react native 0.60.0+ autolink 安装 npm install react-native-s-alipay --save 或者 yarn add react-native-s-alipay 配置 如果你的...
  • 首次运行react-native在android中 首先电脑上要安装npm,java(jdk),python,具体的配置我以前的教程有 在准备工作都准备结束后,新建一个文件夹,比如my001 打开my001,在终端中运行react-native init my001 安卓机...
  • 在命令行终端执行react-native init 项目名 命令后,创建RN项目,在RN项目中运行android的工程有两种方式: 第一种方式,使用webstorm打开RN项目,在webstorm工具的terminal终端中输入react-native run-android命令,...
  • 最近开始学习react-native,从创建项目开始,本以为有前辈们的提醒,可以少踩坑,如履平地的往前走,但是有些坑如果不去踩一下人生是不完整的。。。接下来我也记录下自己踩过的坑吧首先是搭建环境,这个官方文档已经...
  • 前提:已经正常运行的项目 第一步:使用命令加入react-native-camera,并且关联react-native-camera, ...yarn add react-native-camera ...运行了命令react-native link react-native-camera后,会修...
1 2 3 4 5 ... 20
收藏数 7,390
精华内容 2,956