怎样搭建react-native的环境_react-native环境搭建 - CSDN
  • 刚来公司实习的第一天老大就安排了我准备用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环境中童鞋们微笑








    展开全文
  • Windows下搭建react-native开发环境

    千次阅读 2018-03-02 15:54:18
    最近公司没有什么事情,所以决定研究一下react-native.react-native是Facebook研发的一种用于移动端研发hybrid app 的技术(研究的不深,目前只知道这个作用),那么对于react-native环境搭建却是有些复杂.那么对于刚刚...

    最近公司没有什么事情,所以决定研究一下react-native.

    react-native是Facebook研发的一种用于移动端研发hybrid app 的技术(研究的不深,目前只知道这个作用),那么对于react-native的环境搭建却是有些复杂.

    那么对于刚刚完成环境搭建的我来说,赶紧把这个过程记录下来,等忘记的时候拿出来阅览一下.

    好了,废话不说了,进入正题.

    第一步,我们需要安装各种软件:

    1,node.js 下载地址:http://nodejs.cn/

        直接默认安装就行,完成后可以在cmd里面输入node -v确认是否成功.

        ps:这里有个坑,安装完成后会自动添加环境变量,但是有的机器在cmd中依然找不到这个软件,不妨重启一下试试.

    2,git 下载地址:https://gitforwindows.org/

        这个没什么好说的,一直next完成安装即可.

    3,python 下载地址:https://www.python.org/downloads/windows/

        同样的,安装完成后在cmd中输入命令 python -V(大写的)确认是否成功.并在环境变量(PATH)中添加python的根目录.

        ps:显示版本号表示成功.

    4,jdk,并且配置环境变量(JAVA_HOME)

    5,Android-sdk,并且配置环境变量(ANDROID_SDK_HOME),并在环境变量(PATH)中添加*:\Android-sdk\platform-tools

        ps:*表示你Android-sdk所在的盘符.


    第三步,在cmd中通过npm包管理器安装react-native

    1,在cmd中依次输入命令(使用淘宝提供的镜像)
    npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist2,安装react-nativenpm install -g react-native-cli


    第四步,创建项目,并运行

    1,在cmd中输入命令:react-native init 项目名称.

        ps:这里你需要将cmd的当前目录设定为你想把项目存放的位置.

        例如:此时如果输入react-native init myrn ,就会在c盘users的dt文件夹下创建myrn.

    2,在cmd中输入命令:react-native run-android运行项目.

        ps:运行项目前,需要将cmd的当前位置移动到你创建项目的根目录.

        ps:在此时,会自动启动node服务器.

        ps:如果使用真机运行,则需要在应用启动后摇一摇打开Dev setting菜单,进入Debug server host & port for device 中设置ip地址:端口号(8081),注意:手机要与电脑处在同一网络中.


    第五步,安装react-native开发环境

        Android的开发环境就不需要说了,我想看到此文章的同学都不陌生,那么如何搭建react-native的开发环境呢?

    1,在这里我是使用Intellij IDEA作为react-native的开发环境的,也可以用其他的.功能都是差不多的.

    2,打开刚才创建的程序,待加载完成后,点击Run->run选项.配置npm启动.如下图


        点击apply,就完成了配置.

        ps:其实这一步就是配置了使用工具启动npm服务器.


    好了,现在基本就完成了整个环境搭建的过程.

    有哪里不对的,请下方留言,共同探讨哦.

    展开全文
  • 今天搭建ReactNative环境的时候应该是在react-native-cli目录下面执行npm install -g,结果我在根目录下面就执行了,过了一会提示UNMET DEPENDENCY,网上查了一下解决方案好多好多.感觉我电脑的环境其他的应该没什么...

    今天搭建ReactNative环境的时候应该是在react-native-cli目录下面执行npm install -g,结果我在根目录下面就执行了,过了一会提示UNMET DEPENDENCY,网上查了一下解决方案好多好多.感觉我电脑的环境其他的应该没什么问题。

    把C盘C:\Users\Administrator\AppData\Roaming\npm目录下面的node_modules文件夹删除,进入React-Native所在目录下的react-native-cli重新执行一遍npm install -g命令就可以了(ps:我的电脑这种方式可以,其他方式没有尝试)



    最后这不就妥了~~


    开着电脑慢慢下载gradle,我要出去呼吸新鲜空气了。


    建议还是去买个vpn,感觉速度要快点,而且国外的好多网站真的很强大.


    展开全文
  • Windows上搭建React-Native开发环境

    千次阅读 2017-06-21 18:20:28
    技术是进步的,如果你还在为纠结学习Android还是IOS,那么你已经OUT了,这是网友说的。React-Native怎么样我还不知道,只知道要学习这个东西。今天给大家说一说,如何在Windows上搭建React-Native的开发环境

    技术是进步的,如果你还在为纠结学习Android还是IOS,那么你已经OUT了,这是网友说的。React-Native怎么样我还不知道,只知道要学习这个东西。今天给大家说一说,如何在Windows上搭建React-Native的开发环境。

    第一步:如果你是Android开发者,那么你的Android Studio环境一定是没问题的。这一步就是搭好Android Studio环境,直到你能跑起来一个Android工程!网上教程很多!

    第二步:安装一个Git工具。链接直达http://blog.csdn.net/itpinpai/article/details/48105445

    第三步:安装Node.js。链接直达https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

    第四步:这才是重要的一步,下载React-Native相关工具。
    1、在合适的位置创建一个文件夹(这个位置确保不会被删):ReactNative;
    2、进入ReactNative文件夹中(此时文件夹是空的,react-native是自动创建的):右键点击Git Bash Here,弹出一个命令窗口!
    这里写图片描述

    3、在窗口中键入:git clone https://github.com/facebook/react-native.git
    这里写图片描述
    然后回车键,不要关闭命令框,能看见下载进度,等待这个过程下载完成!

    4、完成后,为了能够快速安装react-native相关工具,我们还需要给node.js的包管理器配置一下代理,代理设置如下:
    在此命令框内执行以下两句代码:分开执行,这个过程很快

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

    5、我们就可以直接安装react-native的包了,首先我们进入刚刚git的下载目录中,即ReactNative\react-native文件夹中,在空白处,鼠标右键—>Git Bash Here,弹出一个命令窗口,键入命令:

    npm install -g react-native-cli

    这个过程会会有一点点耗时,等待他完成!

    6、现在你自己创建一个工作目录,比如ReactNativeWorkSpace文件夹;在此文件夹中调出命令窗口(鼠标右键—>Git Bash Here)键入以下代码:

    react-native init MyReactNative

    此时系统会创建一个MyReactNative文件夹,命令框中能看到状态,等待这个过程完成!一般几分钟!

    7、过程6完成后,在MyReactNative文件夹中调出命令窗口(鼠标右键—>Git Bash Here),键入以下代码:

    react-native start

    等待这个过程完成(完成标志:出现React packager ready 字样),完成过后,这个命令窗口不要关闭(这个命令窗口就像一个服务,后面的操作要基于此,切记这个命令窗口一直都不要关闭);
    这里写图片描述
    此时,在你的浏览器输入:http://localhost:8081/index.android.bundle?platform=android

    如果出现下图:(图片未截图完整)
    这里写图片描述

    表明环境已经成功搭建!如果出错,多半的原因是,前面的几条命令,有的未执行完成!就开始执行下一条了!

    8、接下来在你的MyReactNative文件夹中调出命令窗口执行以下命令

    react-native run-android

    接下来要做的事情就是等待了!这个过程取决于你的网速,因为要配置gradle,配置完成后,会安装Apk到你已连接电脑的真机或者是模拟器!这个gradle这个东西,用过Android Studio的都知道,下载慢不说,还容易出错。其实这会在MyReactNative目录中,就有一个Android studio工程,你直接用Android studio 打开它就好了。然后在Android studio里面直接运行。
    如果运行结果是一片红:
    解决办法一:完成过程7,再安装apk(或者摇一摇手机,点击ReLoad);
    解决办法二:在你系统cmd中执行:adb reverse tcp:8081 tcp:8081,再安装apk(或者摇一摇手机,点击ReLoad);
    成功你能看到以下界面
    这里写图片描述

    最后两行是我自己加的。
    到此环境就配置好了!

    展开全文
  • 首先我们从rn的环境搭建开始。 1.安装必须的软件 包括以下: (1)Node (2)Xcode(最好在苹果的app store上下载并且安装) (3)Android Studio 在安装Android Studio之前需要安装JDK, 具体参照react-...
  • React-Native开发环境搭建

    千次阅读 2018-01-16 00:11:00
    万事开头难,开始学习前React-Native之前,我们首先需要搭建React-Native的开发环境。关于React-Native开发环境搭建的教程网上已经有很多了,在这里不再进行赘述,下面列一些推荐的环境搭建教程: React-...
  • 环境搭建准备 环境搭建 React Native中文网 开发工具 前端开发软件:Visual Studio Code 移动端开发软件:Xcode、Android Studio 知识储备 NodeJS React Es6,Es7 React Native介绍 React Naitve的简介:...
  • 前言:因为电脑是windows系统,为了开始React-Native的入坑之路,只能硬着头皮上了,搭建环境的路上走了很多的坑,现在我把我成功搭建的路子记录下来,希望帮助大家少走弯路,也让我以后再搭建的时候,有个记忆,...
  • 因为开发需要要在自己的台式机上搞个react-native环境开发app,折腾了好一会儿,觉得有很多细节还是要记一下。 首先说明,本人使用的是react-native-cli插件思路,搭建所有的环境第一步就应该(强烈建议)查阅官方...
  • create-react-native-app 文档地址 react-native expo 官网 expo 文档 两种创建react-natvie-app的方法 react-native init projectName create-react-native-app project app 环境配置比较:第一种方法要求的开发...
  • React-Native环境搭建-Mac

    2018-08-05 21:04:41
    Node安装 首先,作为前端开发者,Node 环境肯定都是已经安装好了的。建议使用nvm管理,并且设置淘宝镜像,建议使用 v8.0以上版本。哈哈,废话不多说。 ... Watchman ...React-Native环境搭建 Yarn、Rea...
  • 其实对react-native已经仰慕许久,但是由于工作太忙,加上自己的懒惰,迟迟没有着手学习,但是随着react-native日渐成熟,跨平台技术优势的...(1)react-native中文网地址:http://reactnative.cn (2)react-nati
  • 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定...
  • 写React-Native已经有一年了,一直都没好好总结,从今天开始后面会陆续更新,写的不好之处勿喷,在开发之前首先必须得先搭建React-Native的开发环境。ios :1:首先先安装node 这个可以去官网下在或者通过Homebrew安装...
  • 从来不写博客,这次做了笔记,就放...1、React-Native环境搭建   http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86wind ows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-nati
  • 参考资料:...环境react-native(0.58.6) 第一部分:注册app 1.打开控制台,并执行代码: code-push app add <appName> <os> <platform> 生成发布环境的DelopmentKey:Productio...
  • react-native 环境搭建踩坑
  • React-Native 环境搭建

    千次阅读 2018-12-04 11:30:47
     对,你没有看错就是简简介,因为一句话概括,我想说的是,React Native开发的APP不是web APP还是原生APP,不过是通过js可以和原生组件库结合。 二、搭建Android开发环境  因为本人是做Androi的,也没有mac...
  • 从最近对React-Native的研究来看,我觉得是时候从0开始学它并引入到实践中了。目前我负责Android这块,之前也有半年的Js、半年的Php开发经验,曾经那时可谓样样通,样样不精(其实我还有1年的C、1年的C++编程经验,...
  • 这个是在RN环境下的(搭建react-native环境后) react-native-mapbox-gl 旧仓库地址 新仓库地址 介绍看官方文档(上面两个链接),简单来说就是混合开发适合app端改造过后的mapbox-gl mapbxo-gl文档 上也有...
1 2 3 4 5 ... 20
收藏数 6,710
精华内容 2,684
关键字:

怎样搭建react-native的环境