react native 之项目初始化一步到位

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mysimplelove/article/details/78491006

自从Facebook的react native 出世以来,风靡一时,作为前端开发猿,我也从此踏入了这条不归路。。。


前言:本人一直习惯于用windows系统开发Android程序,鉴于此以后的react native 的项目博客都会是基于windows的介绍,爱好mac的同僚请绕路前行。


此篇博客主要是介绍react native 的环境的搭建和项目的初始化,搜集了网上的各种的材料,按照自己使用的结果,做了一下总结,按照下面的流程可以一步到位的成功初始化一个RN的项目。


一步到位呀有木有很激动呀,作为初学者必须很激动呀,很激动呀。。。


友情提示:技术精英的时间都很宝贵,不需要的可以直接忽略该文章。


             好了,唠叨了这么多,下面开始进入正文,请看一步到位的流程:::::::


1.安装Python (Node.js编译运行需要Python的环境)

       友情提示:安装过程就是神奇的next就好了 ,不给大家截图了

 (1)进入Python官网下载安装2.x安装包 不要下载3.x的(Facebook的指导教程就是连接的2.x的版本)

(2)对Python配置系统的环境变量(在path中加入Python的安装目录)

(3)进入cmd命令测试Python安装是否成功  命令:python  –V  (如果成功会显示出Python的版本号)

 

2.安装node.js

        友情提示:安装过程就是神奇的next就好了 ,不给大家截图了

(1)进入官网下载由Current标识的安装包(Facebook的指导教程就是连接该版本)

友情提示:在安装完成以后系统会自动修改node的环境变量,此时如果安全提示拦截可以放过此行为让其执行,不然只         能自己去配置环境变量了。

(2)进入cmd命令测试node.js安装是否成功  命令:node  –v  (如果成功会显示出node.js的版本号)

 

3.安装react native  (通过mpm安装reactnative)

设置mpm国内的淘宝镜像 提高下载的速度:(以下两条命令在cmd里面依次执行)

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

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

 

有需要的请注意:如果以后需要删除设置的淘宝镜像,在 cmd里面执行下面两行命令。

                                                       npm config delete registry

                                                       npm config delete disturl

 

设置完镜像以后,在cmd里面执行   npm install -g react-native-cli命令安装react native

此命令成功以后以后reactnative的环境就搭建完成了,可以小小的庆贺一下了,毕竟没有出现那么多的各种的问题还得苦逼的去解决,哈哈

 

4.初始化reactnative项目

 (1)在cmd命令里面切换到你想要RN项目生成的文件夹下(开心吧,自己喜欢哪个目录就去哪个目录

            执行 react-nativeinit AwesomeProject 命令(项目名字随便按照自己喜欢的来,自己的名字自己做主

            读者注意了:::执行命令的时候可能会出现报错:错误信息主要是下面这个提示

                                           Command `npm install --save --save-exact react-native` failed.

 

            解决方案请往下看:

                                      此时在当前目录执行下面命令就可以了:

                                      npm config set registryhttps://registry.npm.taobao.org

                                      npm config set disturlhttps://npm.taobao.org/dist

 

   最后,最后,最后再次 cmd命令执行 react-nativeinit AwesomeProject   就可以初始化项目成功了

   如果命令界面是下面的结果你就可以笑了,因为你成功了!!!!!,


       到现在为止神秘高大上的react native就被漏出冰山一角了,我也可以休息休息了。。。


       我的RN之路这就是从这个小小的阶段开始了,如果有需要请看下个博客本人是怎么将会将rn项目给运行起来的,下个博客再见,see you

突然想起来,我的以上步骤的安装都是基于我是Android开发,所以电脑的java和Androidstudio都是已经配置好了的,看文章的你请注意一下,不要因为这个使得安装出了什么问题!!!!

reactnative系列第二篇


展开阅读全文

没有更多推荐了,返回首页