首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从0到1打造一款react-native App(一)环境配置

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

作者头像
j_bleach
发布2019-07-02 11:46:34
1.4K0
发布2019-07-02 11:46:34
举报
文章被收录于专栏:前端加油站前端加油站

                                         版权声明:本文为博主原创文章,未经博主允许不得转载。                    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即可,下载地址推荐打开V**去下这个要快一点。

勾选同意,然后下载相应的版本,我电脑是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为项目名称。

等吧。。根据网络状态,会等不同时间,我这边关掉V**之后,反而下载的更快了。。 项目初始化完毕之后,会自动创建一个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 相关文章:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年06月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 环境配置
    • java jdk
      • Android Studio
        • node,python
          • Yarn、React Native的命令行工具(react-native-cli)
            • 设置Android Studio
              • Genymotion
              • 创建项目
                • hello world
                • 总结
                相关产品与服务
                命令行工具
                腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档