[React Native Android安利系列]搭建React Native Android环境
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有
https://segmentfault.com/blog...
(PS,和聊一聊系列写在一起也实在是没辙, 谁知道如何新建专栏,给我留个言.....)
React-Native的横空出世,满足了前端工程师们的愿景,摆脱了浏览器,前端开发者们又有了一个方向。但是本人认为,ReactNative更像是套了一层前端壳子的原生开发,要想了解RN还是需要多多理解原生开发的。废话不多说,想了解更多的RN心灵鸡汤,自己去百度就好了。
搭建react-native的文章虽然很多,但大多数都是搭建js层面的,没有结合原生android和android开发去讲。这一套教程,将会更多的结合原生的安卓去讲react-native。
1. 环境
首先,我们需要搭建一个开发环境。无论是window/mac/linux中的哪一个,必须要具备的条件有以下几点
1.1 安装jdk
windows的话,在cmd中执行java -version看就行,mac/linux的话。在终端下,直接执行java -version命令进行查看,如果没有,请百度"jdk安装与环境变量配置"。直到使用java -version的时候,出现了如下图所示的信息,则证明你安装成功了(如图1.1.1)。
图1.1.1
1.2 安装nodejs
nodejs的官网上有各个系统的下载包,window下可以直接下载exe可执行的node,然后把node.exe所在的路径,添加到环境变量中即可,这样安装更加干净。直到,在windows下的CMD,或者mac下的终端任意目录下,输入node,可以出现如图2.3.1所示即可。
图2.3.1
1.3 安装NPM
一般来讲,安装了nodejs,也会顺带着安装上npm,不过有的时候,我们需要单独安装,windows下,如果使用了node.exe的话,可以自行百度一下 "windows安装npm" 按照说明安装npm,并且把npm添加到环境变量中去。直到在终端或者CMD任意目录下,执行npm出现如图1.3.1所示信息,则意味着,你安装成功了。
图1.3.1
1.4 安装react-native-cli
这个工具是react-native的命令行工具,是我们接下来运行工程的基础。安装的话,直接使用。
npm install -g react-native-cli
命令进行安装即可,mac/linux下的话,可能会报错:
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'
这个时候,证明你的权限不够,可以在命令前面加上sudo:
sudo npm install -g react-native-cli
1.5 安装android sdk
这里建议把android studio与android sdk一起安装,android的官网上即可下载与安装,有bundle版的话,更加的省事。
1.6 安装安卓模拟器
如果有安卓手机的话,更推荐使用安卓手机进行真机调试,如果没有的话,我们也可以通过安卓模拟器进行调试,windows的话,建议下载blue stack(下载安装即可),mac/linux的话,可以使用android sdk里面自带的avd,创建新的设备进行调试。
2. react-native的helloworld
接下来,我们从一个使用了android studio与react-native的hello world入手。开启我们的react-native-android之旅。
2.1 创建工程
我们挑一个干净的文件夹来初始化我们的工程。windows的话,通过dos命令行(程序中查找cmd进入)。linux/mac的话,通过bash进入到文件夹下,执行以下命令创建工程,如图2.1.1
react-native init hellowReact
图2.1.1
等待片刻,我们会看到生成了一个新的项目(helloReact),生成的项目里面包含了IOS版本与Android版本的默认项目。
2.2 用android studio打开
此时我们可以使用android studio打开,新建项目下的android文件夹,如图2.2.1所示。
图2.2.1
打开工程后,我们可以看到下方开始编译bundle,如图2.2.2。
图2.2.2
等待build gradle的过程比较漫长,需要耐心等待一下。build好之后,我们就能看到在我们的andriod studio中出现了新建的工程。
如果发现没有build,那么请看看控制台,是否提示没有安装什么gradle,如果是的话,点击进行安装即可,如图2.2.3。
图2.2.3
2.3 将安卓工程编译并安装到机器上
在准备就绪后,工程上方的工具栏,会出现可以编译的按钮(如图2.3.1所示)我们点击绿色的运行按钮
图2.3.1
如果使用了bluestack的话,请把bluestack打开,如果使用手机调试的话,请把手机的开发人员选项打开,并且把USB调试选项打开。我们这里直接使用了手机调试(如图2.3.2的调试列表中出现了我们连接的手机)。
图2.3.2
无论你用哪种方式,在点击完绿色的运行按钮之后,都会看到选择设备的列表。选择自己的设备,然后点击OK。开始编译(如图2.3.3)。
运行完成之后,我们果然看到了。。。。。。。BUG(如图2.3.4)
图2.3.4
不过,如果你运行到了这一步,恭喜你,你已经将react的安卓项目成功的编译并安装到手机上了。
出现这个BUG的原因主要是由于我们的app调试阶段回去远程寻找我们的js,而默认,它回去本地寻找,所以我们接下来要干两件事情,1. 搭建可以访问js的服务。 2.让手机上的react应用去按照这个服务寻找JS
2.4 搭建服务
用windows的CMD或者MAC/linux的终端,进入到hellowReact目录下(我们用react-native init创建的工程),然后执行,结果如图2.4.1:
react-native start
图2.4.1
运行成功后,我们看到react-native利用了本机的8081端口,开启了一个js的服务,我们访问一下(结果如图2.4.2所示)。
http://localhost:8081/index.a...
(PS:第一次访问编译会有点慢)
图2.4.2
2.5 设置app寻找js的地址
接着,我们要进行第二步---让手机上的react应用去按照这个服务寻找JS
我们打开手机上那个报错的APP(hellowReact),然后摇一摇。(是的,摇一摇,不过不是微信)此时会出现开发者工具,如图2.5.1所示
图2.5.1
当然,你要是使用bluestack的话,也行,左侧工具栏里面有摇一摇。
如图2.5.2,点击Dev Settings,点击最下方的Debug server host & port for device,
图2.5.2
会弹出配置项,这个配置项就是寻找js的地址啦:
那么地址如何填呢?
如果是真机调试的话,手机最好和自己的电脑在一个局域网下(使用了同一个wifi也可以),如果是bluestack的话,则不用管这个了。
windows电脑,请在CMD命令下,输入ipconfig查看自己的ipv4地址。或者用电脑右下角的查看网络连接,来查看自己的ipv4地址。如果是mac/linux的话,查看一下网络设置,上面会有写。自己的ip地址。
在配置项里面填写自己的ip地址:8081,如图2.5.3
图2.5.3
2.6 重新加载js,并运行成功
点击确定,返回主界面。再摇一摇手机,然后点击reload js。运行结果如图2.6.1
图2.6.1
于是,我们的hello world就大功告成啦,至此,我们的React-Native-Android环境也算大功告成了。
上述讲解,可以在这里找到代码例子:
https://github.com/houyu01/re...
不要走开,马上回来,下一篇,我们会介绍,如何在ReactNative中利用js编写我们想要的界面
[React Native Android安利系列]搭建React Native Android环境相关推荐
- rn在java中什么意思_[React Native Android 安利系列]RN中使用js调用java代码
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: 书接上节,我们上节说道,如何控制原生andr ...
- react安装_「React实战」三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...
- 创建react项目 Linux,idea2018 快速搭建react项目指南
react与angular和vue是截止2018年为止主流的前端框架.对于一些新手来说,想快速入门react,应该是搭建一个react最初的模板项目,然后在项目中添加一些自己喜欢的组件作为练手..今天 ...
- Android 面试系列(一)Android 基础
文章目录 序言 四大组件 Activity Activity 生命周期 onStart() 与 onResume() 区别? Activity 启动模式 launchMode 使用 Intent 标记 ...
- [React Native Android 安利系列]样式与布局的书写
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: https://segmentfault.c ...
- Android稳定性系列8 Native crash处理流程
一 Native Crash 从系统全局来说,Crash分为Framework/App Crash, Native Crash,以及Kernel Crash. 对于framework层或者app层的C ...
- 【react storybook】从零搭建react脚手架,并使用storybook发布组件库到npm,并生成可视化UI文档
storybook 成品展示 开发准备 开发组件 写MDX文档 发布文档 发布组件 成品展示 可视化UI文档页面: 可视化UI文档地址: https://guozia007.gitee.io/stor ...
- Android studio系列:win10上Android studio4.0.2下载安装
.exe文件到共同进步里面找.如果丢失了,到官网下载历史版本,网速很差,去下载集下载 Android studio 4.0.2版本,本身自带jdk(虽然文件名写的是jre),版本是1.8.0_221, ...
- android+夜间模式开发,高质量Android开发系列之(一)-Android夜间模式最佳实现
由于Android的设置中并没有夜间模式的开关,对于喜欢睡前玩手机的用户,只能简单的调节手机屏幕亮度来改善体检.当前越来越多的应用开始把夜间模式加到自家应用中,相信不久google也会把这项功能用到A ...
最新文章
- 如何用Leangoo看板+脑图高效创新
- iOS 调用地图导航
- 看微软 Windows 30年发展简史,你用过最早的系统版本是什么?
- OpenGL超级宝典笔记——遮挡查询 [转]
- php打开文件读写函数,php中常用文件操作读写函数介绍
- mysql原生库_Mysql数据库的一些简单原生sql语句
- 【数据结构与算法】图的邻接矩阵表示及其BFS、DFS的Java实现
- azure机器学习_Azure机器学习中的数据清理
- Unity3d笔记——制作简单动画
- 模型预测控制matlab工具箱,MATLAB模型预测控制工具箱函数..
- 侠盗病毒”志不在“侠”,360安全大脑强力查杀!
- 解决 win7 不支持此接口 问题
- (lintcode)第4题 丑数II
- java poi 操作word遇到的问题
- iOS 聊天表情键盘
- 小学生组词词典 官方
- 求某学生8门课的平均分
- 电商风控赛事亚军方案分享!
- 前端背景图放置_html 多张背景图片并存
- IBM p系列小型机日常维护及故障排除时常用命令(检查IBM设备状态汇总)