54

​100行JS代码实现一个跨平台的图片搜索APP

 7 years ago
source link: http://mp.weixin.qq.com/s/Fl2YMraOUjoW1knYK-xgxg
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

本文教你怎么用React Native用100行代码实现一款能同时运行在iOS和Android下的图片搜索APP。

React Native介绍

React Native是Facebook2015年开源的一款APP开发框架， 采用了React的基本思想，将React的虚拟DOM渲染成原生组件， 既保证了运行效率，又大大提高了开发效率以及代码复用。React Native 开源以来受到了极大的关注，目前 GitHub 上有 56000+ stars，背后有 Facebook 这样的大公司支持，也在有大量用户的产品里面采用了此技术，国内也有很多公司在用。开发效率高于原生应用，运行效率高于 H5 混合式开发，综合素质很强。

开发 Native 应用，需要配置比较多的环境。比如开发 iOS，需要有 Mac 电脑，然后安装 XCode等； 如果是开发 Android，需要安装 Java、Android Studio、Android SDK 等，整个配置非常费时。好在今年3月份，Facebook 开发了 Create React Native App， 这个工具是仿照 Create React App 设计的，大大简化了初始开发流程。

首先需要安装 Node.js，如果还没有安装的请访问 Node.js，下载对应平台版本。然后只需要执行如下命令：

Image

这个工具就会在你的电脑上启动一个 server，并且打印出一个二维码。你只需要在手机上装 Expo APP（iOS 和 Android 都可以），让手机和电脑在同一个 WiFi 下，然后打开 Expo APP：

 

Image

选择扫描二维码，即可在手机上看到第一个 React Native APP。 然后修改 App.js 文件，保存后手机上就能立马看到效果！多亏了热更新！

 

Image

摇一摇手机，会出现菜单， 打开Hot Reloading神奇的事情会出现~~。

 

Image

[Node.js]   https://nodejs.org/en

[Expo]   https://expo.io/

有了上面的准备工作， 我们可以来开始我们的图片搜索APP开发了。

搜索引擎的巨大工作量在后端， 可不是一个APP里能做出来的， 这让我想起以前在网上论坛看到有人问：

我会PHP，请问几天能做出一个百度那样的东西来呢？

下面有个牛人回复：

根本不用PHP， 5分钟就可以做出来。 你写一个html页面， 然后里面用iframe嵌入baidu.com就可以了。。。

我们今天就用类似的方式去做。不要觉得这很low，互联网发展早期有一类工具叫元搜索引擎，就是调用多家搜索引擎的数据，然后整合返回给用户的。

首先我们选择一家图片搜索引擎，国内当然是百度图片啦，不然你用Google的话还得。。。

我们随便选一个志玲姐姐搜索吧，我们在搜索框里输入女神“林志玲”，点击搜索之后检查URL如下：

前面的参数我们可以不用管， 也就是说百度图片搜索只需要把关键字加在搜索参数word后面就可以了。搜索出来结果大概是这样：

Image

然后我们用鼠标点击右键选择显示网页源码：

然后对照着DOM结构分析，我们找到了数据部分：

这时候我们发现，图片数据的信息（包括url，宽和高等）就在imgData这个对象里， 我们只需要用字符串截取出这段，然后用JSON.parse解析成Javascript Object就可以访问thumbURL, width, height等字段了。

接下来就只需要把前面获取到的图片显示出来就可以了。

显示图片用Image组件，

这里要注意两点，一个是source里面传递的是一个object， 里面是uri不是url哦。 第二个是一定要记得设置width和height，否则是显示不出来的。

因为我们获取到的是很多张图片，所以用列表方式显示，可以用ScrollView和FlatList：

获取用户输入

如果我们只能显示默认的志玲姐姐的照片， 那怎么能叫搜索引擎呢。 所以我们用TextInput来接收用户输入， 用Button来触发搜索。

下图就是我们的成果啦， 大家玩得开心。

看， React Native开发APP还是蛮快的嘛， 而且这段代码支持Android和iOS哦。

完整代码地址https://github.com/magicly/rn-code/tree/master/ImageSearchEngine

当然React Native能做的事情还有很多，有兴趣的话欢迎扫描下方二维码或者点击阅读原文，阅读作者的GitChat达人课程《React Native 移动开发入门与实战》。

Image

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK