美文网首页程序员
ReactNative环境搭建问题小札

ReactNative环境搭建问题小札

作者: WANGCHONG_ | 来源:发表于2018-05-23 14:05 被阅读0次

    直接进入正题...

    ----------win7系统 + android studio工具

            按照reactnative的官方介绍搭建开发环境 - React Native 中文网,使用Chocolatey,简单方便一些,但是会有一些小问题,不是因为翻墙的问题,python和Yarn、React Native的命令行工具(react-native-cli)没有太大的问题,注意,是没有太大的问题,小问题还是有的

            吃过亏,画个圈...

            建议node.js还是手动安装比较好,使用Chocolatey安装的目录C:\Users\admin\AppData\Roaming,可以修改,具体问百度,但是这个目录属于隐藏文件,在尝试之后,我选择自己下一个

    A、下载Node.js,这个找个看的顺眼的下载即可,没有太大难度

          1、 windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如我的是“C:\ProgramFiles\nodejs”,如果path中没有,那么需要你自己配置。检测是否安装成功:打开命令行cmd,输入node–v(下图说明,安装成功)

    安装成功

        2、npm的安装。由于新版的NodeJS(找新的)已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。如果没有,回头自己找新的,不然就是自己重新下载

    npm成功

            要知道,此刻不是全部,因为并没有成功,我们需要配置"node_global"及"node_cache",第一次安装也是因为这个,扯着dandan了,我们要先配置npm的全局模块的存放路径以及cache的路径,将以上两个文件夹放在NodeJS的主目录下,便在NodeJs(你的安装路径,自己记得)下建立"node_global"及"node_cache"两个文件夹。如下图

    新建目录

    然后,启动cmd,运行(官网有这两句话,貌似...)

    npm config set prefix "C:\Program Files\nodejs\node_global"

    npm config set cache "C:\ProgramFiles\nodejs\node_cache"

    ps:注意自己的安装路径(C:\ProgramFiles\nodejs)

            然后安装模块,同样在cmd命令行里面,输入“npm install express -g”(“-g”这个参数意思是装到global目录下,也就是上面说设置的“C:\ProgramFiles\nodejs\node_global”里面。)。待cmd里面的安装过程滚动完成后,会提示“express”装在了哪、版本还有它的目录结构是怎样。此时你打开node_global目录,你会发现,文件夹不在是空的了。如果是空的,你可以重新安装或者选择放弃(截图就不放了,有点长)。

            next,关闭cmd,不用管它,然后配置环境

            进入环境变量对话框,在系统变量下新建"NODE_PATH",输入“C:\PrograFiles\nodejs\node_global\node_modules”。新增:由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量"PATH"修改为“C:\ProgramFiles\nodejs\node_global\”),要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。(无碍)

            以上步骤都OK的话,我们可以再次开启cmd命令行,进入node,输入“require('express')”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图(如出错一般都是NODE_PATH的配置不对,回头自己去看)

    正常

    B、安装python和Yarn、React Native的命令行工具(react-native-cli),可以使用Chocolatey,当然也可以自己下载安装,配置环境,这两个没有太大问题,问题一般都出在Node上。

    C、安装官网介绍,此刻你可以建一个rn项目(AwesomeProject是项目名字)

                        react-native init AwesomeProject

                        cd AwesomeProject

                        react-native run-android

            当然也可以导入一个项目(android部分),倘若本项目缺少node_modules,只需要在本路径下,打开命令行,输入npm install即可,等到node_modules安装完成,即可在android studio中编译,不过再win环境下,时间相对较长


    我的项目运行无误了,你的呢...

    参考链接:http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

    相关文章

      网友评论

        本文标题:ReactNative环境搭建问题小札

        本文链接:https://www.haomeiwen.com/subject/kpzqgttx.html