从0到1打造一款react-native App(一)环境配置

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

前言

最近心血来潮,想要做一个全栈的App玩玩,在网上查阅一下现在的主流的技术栈,考虑的自身能力及开发成本,准备做一个node.js+koa2+react-native的app。目前个人的状态是node.js会一点点点点,koa2不会,react-native也不会(在这几个技术栈里算零基础吧)。但是没事,我就喜欢从什么都不会开始做,这样才好玩,不说废话了。开始!

环境配置

今天主要做了react-native的环境配置,在网上找了一个教程做参考,不过是做IOS的,本人没有苹果电脑。。所以就附上今天windows下搭建安卓环境运行react-native的教程。

java jdk

因为是跑安卓,所以需要依赖java,虽然现在安卓官方语言改成Kotlin了,但是好像也不怎么关我的事。。下载最新的java即可,下载地址推荐打开vpn去下这个要快一点。

勾选同意,然后下载相应的版本,我电脑是64位。下载完毕后,一路next,按照默认路径是不需要配置环境变量的。如果自定义了路径,记得去配置环境变量,网上大量教程不赘述。

Android Studio

既然是安卓,sdk少不了,下载地址, 这玩意有点大,下载最新的即可,此时最新的版本2.3.2.0。在下载间隙,可以顺便去下载一些其他的。

node,python

这两个也是需要的环境,下载安装,一路next即可。 node下载地址:http://nodejs.cn/download/ python下载地址:https://www.python.org/downloads/ 这里注意python要下载2.7.13版本

Yarn、React Native的命令行工具(react-native-cli)

下载好node之后,需要下载一下react-native的脚手架,帮助我们快速建立起一个项目。 确认node安装完毕之后,在cmd输入

npm install -g yarn react-native-cli

设置Android Studio

经过漫长的等待,Android Studio终于下载好了,安装时需要选择路径,开始自定义了路径,结果到后边运行程序时一直报错sdk location not found,明明环境变量也配置过了,但还是没解决问题,网上找了2个解决办法,也不靠谱,最后无奈又重新安装了一遍,直接按照默认路径安装了,这个安装下来比较大有3个多G,但是没在出问题了,目前不清楚哪里有问题,所以安装时自己衡量一下,如果自定义了路径可能会出现问题。 进入

选择SDK Manager,进入之后有三个地方需要勾选, 1.

进入后,勾选Show Package Details,然后找到Android 6.0,勾选下面的Android SDK Platform 23。

2.

切换至SDK Tools,还是勾上Show Package Details,然后勾选23.0.1。滚动条拖至最下方,检查Android Support Repository是否勾选,我这里的版本是默认勾选的。

此时Android Studio配置全部完成,然后需要在环境变量当中加入

在环境变量中新建ANDROID_HOME,值就是当时安装sdk的路径。然后

双击上图ANDROID_HOME下的path,进入path后新建两条,即之前sdk的路径,加上tools和platform-tools。最后确认退出。

Genymotion

还有最后一个东西下载,就是安卓模拟器,下载地址,进入网站之后,首先注册一个账号,注册完毕后,会自动跳转到下载界面选择第一个下载

下载完毕之后一路next安装。安装完成后,会进入一个界面购买license的界面,选择最下方的个人用户,即可免费使用。进入后等待几秒,会让选择所要运行的安卓虚拟机。

本着索尼大法好的信仰,滚动条划至最下方,选择sony z4。选择后,会有一段时间的下载等待时间,如图:

下载完毕后,点击start,运行虚拟机。

完毕后出现虚拟机

ok,此时准备工作都就绪了,去开始建立一个react-native项目。

创建项目

打开命令行,cd到我们所要创建项目的目录,执行

react-native init bleachApp

bleachApp为项目名称。

等吧。。根据网络状态,会等不同时间,我这边关掉VPN之后,反而下载的更快了。。 项目初始化完毕之后,会自动创建一个bleachApp的文件夹

然后cd到这个文件夹运行命令:

react-native run-android

又是漫长的等待。。。中途可能会卡到某一项,下载不动,多等几分钟,如果还不行,就只能重新下载了,我也是下载了两次才下好。完成后会显示BUILD SUCCESSFUL。

如果预先,没有连接真机,或者打开安卓模拟器,会报一个未连接设备的错误,所以这里我们选择事先把模拟器安装好,并开启。此时模拟器会出现react-native的页面

hello world

现在,用ide打开之前创建好的bleachApp这个项目,向经典致敬一下,把页面改成hello world。

修改完代码之后,切换至安卓模拟机的界面,双击键盘上的R键,可以看到模拟机上的界面会重新reload,变成刚才写的hello world。

总结

至此,从安装至显示hello world界面已经全部完成,过程要比写出来的坎坷。比如遇到找不到sdk 路径的问题,下载失败等等吧。接下来会在每周末空暇的时间都写一点,一边学一边记录吧。也许之后会麻烦,but who cares….

项目地址:https://github.com/jiwenjiang/react-native-nfc 相关文章:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券