【入门篇】react-native

jayzou

前言

这里以编写react-native android应用程序作为例子来讲解(为毛不用IOS?因为没有mac,也不想装黑苹果)

搭建基础环境

JDK(必须,不解释)
SDK(建议使用Android Studio,集成SDK以及模拟器)
genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装)
NVM(node版本控制器,需要node4.0以上版本)

以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理

踩坑记录

genymotion

这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真机的朋友可跳过这段。
genymotion的安装有2种模式,一种是带有Oracle VM VirtualBox虚拟机,另外一种是纯净版,genymotion的运行依赖VirtualBox虚拟机。

选择下载android6.0-API 23模拟器
此处输入图片的描述

如果无法显示API列表,请配置代理Settings->NetWork->Use HTTP Proxy

启动模拟器,可能会有部分人卡在android启动界面上面,无法进入
此处输入图片的描述
genymotion的运行基于X86的架构,比起arm,X86的性能更流畅。我们需要使用X86架构的话,还需要安装HAXM。

1、打开SDK Manager->Extras->Intel x86 Emulator Accelerator,安装即可,如果没有任何东西显示,还是代理问题,Tools->Options->Proxy Settings
2、进入C:\Users\用户\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager
安装intelhaxm-android.exe,安装出错,请参考这里

至此我们就能进入模拟器界面

Android Studio

如果想使用android studio自带模拟器,可以打开AVD Manager->Create Virtual Device->选择自己需要的android版本
值得注意的是,模拟器默认选择X86架构,如果你不喜欢,你需要自己手动改成arm架构
此处输入图片的描述

NVM

这里选择用NVM来控制node版本,如果你已经装过node4.0以上的版本,就跳过这里。
安装方式和使用文档,github上面讲的很清楚,这里说下代理的配置,其实也就是npm的代理,配置全局代理

npm config set proxy=you proxy
npm config set https-proxy=you https proxy

React-native初始化

心理默默祈祷以下命令千万不要错误。。。

npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native start
react-native run-android

果然。。。好吧,这里分享下自己遇到的一些问题

npm install -g react-native-cli:出错的最大可能就是node版本低于4.0或者代理没配置成功
react-native run-android:这个命令会下载gradle依赖,执行失败的原因大部分也是因为代理的问题
进入C:\Users\用户\AppData\.gradle,打开gradle.properties(不存在就新建一个),修改

systemProp.https.proxyHost=You https proxy
systemProp.https.proxyPort=You https proxyPort
systemProp.http.proxyHost=You proxy
systemProp.http.proxyPort=You proxyPort

总算是把android应用程序跑起来了,真累人啊
此处输入图片的描述

总结

先发一篇react-native起步的文章,之后会进行一些实际的案例开发,文章内容如果有哪些不对的地方,欢迎指出。

参考文档

http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html
https://facebook.github.io/react-native/docs/getting-started.html

阅读 19.7k

前端小事
记录一些前端学习日记

生鱼忧患,死鱼安乐

2.8k 声望
0 粉丝
0 条评论
推荐阅读
打造一个媲美Ctrf+F的搜索组件
Ctrf+F相信大家一定不陌生,很多人都依赖Ctrf+F来搜索网页上想要看到的内容,也是最频繁使用的功能之一。浏览器之间存在兼容性问题,但是肯定都提供原生搜索框(而且快捷键都是ctrf+f)

jayzou5阅读 2.2k

嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs3阅读 418

封面图
知道事件捕获! 🤪 但不会用来实现批量拖拽上传?
【同事 A】:你知道 Element UI 的 Upload 组件怎么实现 批量拖拽上传 吗?现有的二次封装的 Upload 组件只能做到 批量点击上传 。

熊的猫1阅读 721

封面图
浏览器渲染原理(一文搞懂)
浏览器渲染原理前言浏览器的主要功能总结起来就是一句话:将用户输入的 URL 转变成可视化的图像。从 URL 到 DOM 树;从 DOM 树到可视化图像;这两个过程之间的关系并没有那么明确,我们可以统称这两个过程为页面...

风不识途1阅读 786

【验证码逆向专栏】安某客滑块逆向
声明本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!本文章未经许...

K哥爬虫1阅读 246

封面图
如何用JavaScripte和HTML 实现一整套的考试答题卡和成绩表
相信在学校的你都有这样的体验,临近考试,要疯狂的“背诵”否则成绩单就要挂零,因为答题卡全部涂抹都是错的。那么毕业多年的你,没有了考试,有没有一丝怀念涂答题卡的时候,有没有好奇这个答题卡到底如何制作,...

葡萄城技术团队1阅读 355

ES10 中 Object.fromEntries() 怎么用?
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智2

生鱼忧患,死鱼安乐

2.8k 声望
498 粉丝
宣传栏