针对前端初级学者,如何在windows下搭建react-native环境详细教程

    xiaoxiao2023-03-24  4

    我也是自学react-native,当年到处找教程,然而最难的一步却是环境的搭建,虽然网上有很多关于环境配置的文章,但是都不够详细

    所以我也是踩着坑过来的,毕竟我也只是个前端初级学者,所以我想写一篇让我自己也能看得懂的教程,让大家共勉。

    作为一名学端学者,我的顺序可能跟别人的不一样。比如说node和git基本上是必备。

    1、安装node

    基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本

    下载地址:https://nodejs.org/en/

    这个就不多说了,不会的可以去百度怎么安装node.

    2、安装git

    这个我也不想多说的,前端应该都用过,都会。

    官网去下载一个就可以了,无非就是注意第三步时勾选不要选错了

    http://code.google.com/p/msysgit/downloads/list

    3、安装Java

    react-native的编译需要用到java,如果你想要在windows上运行java写的程序,那么你需要安装java运行环境

    如果你想在windows上进行java开发,那么你需要安装jdk

    http://rj.baidu.com/soft/detail/14459.html?ald

    你可以去官网下载,也可以去百度,下载下来的东西大约长这个样子:

    然后直接打开安装就可以了,中间不用做任何更改。

    记下你安装的目录地址,配置环境要用!

    重点:网上的教程都没有讲这一步:

    安装完成jdk后要进行windows环境变量的配置才可以运行java或使用java进行开发

    1、右键“我的电脑”(XP)(或者“计算机”(win7),“这台电脑”(win8)),选择“属性”

    2、点击左侧“高级系统设计“

    3、点击选择”环境变量“,进入环境变量的设置

    4、在系统变量里新建一个名为”JAVA_HOME“的变量,变量值为安装jdk时的路径,比如此处为”D:\Program\Java\jdk“,点击“确定”

    5、在系统变量里新建一个名为“CLASSPATH”的变量,变量值为“.;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar;”,点击“确定”

    6、找到并选中系统变量的“Path”变量,点击“编辑”,在后面添加“;%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin”,点击“确定”

    最后在“环境变量”上点击“确定”,完成环境变量的配置

    打开命令行提示符(运行里输入“CMD”,回车),

    输入“java”,如果返回一大串命令提示,说明jre成功安装且环境变量配置正确,

    输入“javac”,如果返回一大串命令提示,说明jdk成功安装且环境变量配置正确

    4、安装android环境SDK

    直接百度就可以找到android SDK的windows下载地址,下载安装也都是傻瓜式的

    跟java一样需要配置环境变量。

    1.在系统变量里找到Path选中,点击下面的编辑。(跟上面java配置方法一样)。

    在变量值里加入androidSDK中platform-tools和tools的目录路径,

    这里我的是D:\android-sdk_r20.0.3-windows\android-sdk-windows\platform-tools和D:\adt-bundle-windows-x86_64-20130729\sdk\tools。

    当然两个之间要加个分号“;”

    测试就是在终端输入: adb  ,如果出现一长串,就说明配置成功了

    然后我要告诉你的是:你的环境已经搭好了!!

    接下来,我们来玩玩react-native吧!

    我们已经安装过git,我们就不要再使用终端了,就使用安装的git bash

    1.先择你想要创建项目的文件夹,点击右键,选择 git bash here,然后就会弹出一个跟终端一样的git bash 窗口:,并且直接到达你想要的文件夹下。

    2.输入:npm install -g react-native-cli 然后enter

    这一步是安装react-native命令。需要的时间比较长,我不知道是不是我网速的原因,也有可能会失败,失败就再输入。

    3.等待安装成功之后,你就可以创建你的项目了:

    在命令行中输入:react-native init wushaoxion

    等待一段时间之后,它就会创建一个名为wushaoxion的项目,这个过程也是很漫长的,这个我不知道是不是我电脑的配置原因。

    当它这样的时候你不要以为它卡了,实际上它一直在运行。

    (好漫长的等啊等,我应该在写前面内容的时候就让它跑起来的,吧嗒唉呀好无聊啊,可惜没人跟我聊天。。。快点好啊,怎么这么慢啊,我的电脑是不是坏了,唉呀唉呀

    ,我就不断续讲了吧。。。我实在是不想再演示了,你懂就行了,我去网上下载两个图片

    这个地方之所以慢是因为要下载的东西被墙了,如果你有vpn会快一点,但是我们也有淘宝的npm境像可以使用:

    1.通过config命令

    npm config set registry https://registry.npm.taobao.org npm info underscore (如果上面配置正确这个命令会有字符串response

    2.命令行指定

    npm --registry https://registry.npm.taobao.org info underscore 再运行的话速度就会快很多

    就像这样,就代表初始化项目完成了,然后你打开文件夹,会发现它里面有很多内容,我们先不要管它。

    4.这时候在终端里输入:react-native start

    不好意思,你又要等很久了

    运行成功之后不要关,不要关,不要关,重要的事情说三次!

    5.此时我们可以在浏览器中打开:http://localhost:8081/index.android.bundle?platform=android

    然后就会看到一大串代码

    6、然后我们在第一次git bash here的地方再次右键,再次选择git bash here,另外开启一个命令行。

    然后拿一个android的手机,开启开发者模式,每个手机开启的方式可能有点不一样,自行百度就好了

    一定要开启开发者模式!

    然后在命令行里输入:react-native run-android

    你可能又要等好久了,惊喜总是需要酝酿的。

    成功以后,会像这样:

    然后你的手机上安装了一个app,你有可能会问:打不开怎么办?

    打不开就对了,你需要在应用设置里给它最高权限。

    打开报错了怎么办?

    报错就对了!

    对,就是这样子的,你摇一摇你的手机,就像玩微信的摇一摇那样,它会弹出一个列表

    点击Dev Settings后,点击Debug server host & port for device,设置IP和端口

    填入的的IP就是电脑的IP,不知道的话可以在命令行中输入ipconfig进行查询(但是不要在上面的两个git bash里面查询),端口号固定8081。

    然后我们再次摇一摇,选择Reload JS.你就会看到如下界面:

    再怎么办?

    问得好,找到你项目文件下的 index.android.js.另一个ios的我们暂时不管,因为windows下我也不知道怎么测试ios.

    用你喜欢的ide打开它,如果你有学习过reactJs的一些内容,你应该能看懂一些

    那么你就可以尝试更改里面的内容了。

    更改之后保存,然后摇一摇你的手机,选择Reload JS, 然后手机上的界面就刷新了

    最好不要瞎改,不然报错你又不知道怎么办,自己找一个教程,慢慢研究吧!

    后记:

    1.一定要在终端检验你的java 和 android的环境配置有没有配置好

    2.命令行运行过程中有可能会出现报错,那么你就详细检查你的配置步骤有没有出错

    3.如果以上步骤都没有出问题依然报错,请重新运行,如果还是报错的话,一定要忍住不要砸电脑,因为我也不知道怎么办了。

    纯属个人经验,还望行家指导!

    转载请注明原文地址: https://ju.6miu.com/read-1201484.html
    最新回复(0)