编者按: React Native 愈发火爆, 如果你尚未接触过, 不如看看本文作者的入门指南, 他会带你体验基于 RN 平台开发一款电子商务搜索类 App 的奇妙旅程! 本文编译自 Hackernoon, 原文标题为: Building an e-commerce search app with react native, 推荐有一定编程基础的读者阅读
今天我们来聊一聊是如何在 RN 平台开发一款用于查找图书数据库的电子商务移动 app 如果你之前没有使用过 RN, 那么现在就跟我一起开启你的移动端 Javascript 开发之旅吧
2018 年 Javascript 迎来了前所未有的发展, 各种库框架开发工具都已经发展的相当的成熟了, 整个社区也都在致力于使网上冲浪变得更加方便快捷当然, 开发过程中还是会存在一些 bug, 但是, 如果你会用 Javascript, 那么这些小问题就都不是事你可以利用 JS 来制作 web app 后台服务器移动端 app
React Native 不仅可以像 Cordova/Ionic/Phonegap 等利用 WebView 架构和 Javascript 进行移动端 APP 开发, 而且支持 native 编译, 因此如果有需要也可以编写 native 代码
你需要提前知道的事情
现在 React Native 非常的火, 网上有很多的资源, 所以你可以很容易从互联网上获取学习资源, 因此, 在你进行 RN 程序开发之前最好有一定的学习基础如果你是刚接触这个项目, 你可以先尝试学习下官方教程, 如果, 你更愿意跟着视频课程进行学习, 那么我会强烈推荐你去看 Kent C. Dodds 在 egghead 上的免费课程 The Beginners Guide to ReactJS
如果你对 ES6 + 同样了解的话, 那就再好不过了这有一本 ES6 的入门指南, 有了它, 你就能很快上手了
作为一个初学者, 虽然我建议你去认真学习一下 React, 并开发一些网络版的 APP, 但是, 如果你想抓紧时间上手开发自己的程序的话, 好好的了解 React 的基本架构也是很有必要的, 因为 React 和 React Native 具有相通的架构, 只是他们最后的目标不同, 一个是服务于 Web APP 的, 另一个是服务于 native APP
如果, 你使用 React 或 React Native 进行产品开发, 你将节省大部分的时间和精力, 因为, 无论是 IOS 还是 Andriod 平台, 社区上都有很多其他人共享的代码这也是为什么 RN 开发平台被像爱彼迎, 脸书, 照片墙, 沃尔玛和特斯拉等公司接受并利用它开发移动端 app 的原因
基本概念
简单的介绍一下 React Native 是如何进行工作的以及 JavaScript 的代码是如何装换成到一个强大的移动端 app 我们需要知道的是任何的一个 React Native 应用都是双线程的:
1. 主线程
主线程管理着程序的用户界面, 处理包括手势和触摸在内的所有本地交互因为 RN 允许在源代码中添加 android java,Objective C 或 swift 代码, 所以这些代码块也可以在此线程中执行是不是感觉这样开发变得很舒服
2. JavaScript 线程
这个线程执行在 JavaScript 编译器写的 JavaScript 代码(默认状态下是在 iOS 平台中, 并且通过构件可以发送到 Android 设备上)
为了使应用程序正常工作, 两个线程之间就需要搭一座桥接器来实现交流, 就像下面的示意图展示的那样
React Native core architecture
正如名字所表示的, 中间件可以帮助实现 JavaScriprt 线程和主线程之间的数据 (信息) 处理这些信息可以被异步和批量处理中间件可以保证 JS 代码与本机模块进行对话并且与设备 API 交互
现在我们对 RN 的结构有了基本的了解, 接下来我们来介绍实现的过程
搭建开发环境
如果你已经安装了 RN 并且对开发系统比较了解, 你就可以跳过去看下一部分内容了如果你是刚入门的新手, 那么你可以按照官方的安装指南 (会有更加详细的介绍) 去操作, 或者按照我下面说的去做首先确认你的电脑上已经成功安装了 node 和 yarn 模块我们将利用 CRNA(create-react-native-app )工具来创建模版, 运行下面的指令实现程序 HelloNative
- create-react-native-app HelloNative
- cd HelloNative
- npm start
这将为你启动一个可扩展的服务器, 并在终端输出一段 QR 代码使用 CRNA 工具出现的警告只有:
it may not use the latest version of react-native
如果出现这个警告, 你可以使用 Expo CLI 或者 Expo XDE 去解决
然后安装 Expo 在你的 iOS 系统或者 Android 系统上, 并将手机和你的电脑一样联接到网络中使用 Expo app 你就可以在你的手机上进行操作啦, 想想就很令人激动把就像下面图显示的一样:
React Native app
你可以运用 yarn ios 和 yarn android 指令分别在 iOS 和 Android 模拟器上测试, 这样你就可以运行你的 React-Native app 啦
如果你知道如何打开 app 中的扩展菜单, 你将会看到有支持热加载和实时重载选项这些可以使你可以迅速在 Andriod 环境下加载你的 app
A closer look at the developer options
扩展操作同时具有了 debugging 模块, 在后面的内容中我们将进行详细的介绍
调试模块
远程调试 JS 程序可以让我们查看相关的控制信息和错误信息这让我们的开发和调试过程变得更加容易, 另外, 你还需要安装 React Native debugger
React Native Debugger in action
这是一个非常实用的工具, 可以帮助我们查看 React Native app 中的模块声明和类树, 你也可以在上面查看和码上你开发的 app 需要运用的模块
准备阶段
React Native 提供了一些开发 app 的基本模块, 你可以在 list of available components here 中找到 React Native 提供的不同平台下对应的功能模块, 这些模块可以帮助你进行开发属于你自己的 app, 这让开发过程变得更加简单 React Native 支持 fetch 功能, 这样使得开发人员在开发过程中就可以像网页一样从服务器上获取数据和处理 http 请求
对于我们将要设计的搜索 app, 我们将使用能够在短时间内遍历大量数据的 NoSQL 数据架构进行开发它将对以 JSON 为对象的所有文档进行全文搜索
可能你以前没有接触过 Elasticsearch, 但是你不得不接受使用 Elasticsearch 是个趋势你可以从下面的介绍中学习相关的基础
Elasticsearch 的起步并不是那样的简单, 设置环境添加数据查看数据等等操作对于一个初学者来讲并不是一件简单的事, 因此, Elasticsearch 的社区里面提供了很多开源的工具来帮助初学者进行开发
. Importer 添加数据到 Elasticsearch 中
. Data Browser 以 excel 表格的形式查看 Elasticsearch 中的数据
. Query Builder 组织管理关联的 Elasticsearch 队列
在这些工具的帮助下, 我们可以直接利用这些工具和 React Native 去组建一个强大的移动端图书馆 app
你可以按照官网的指导安装设计 Elasticsearch 服务器, 或者你可以申请一个 appbase.io 的账号, appbase.io 提供了一个 Elasticsearch 的服务器, 这样就更加方便了, 因此, 我们就用 appbase.io 平台开始我们的开发
我已经简单的创建了一个基本的数据搜索的 app, 你可以进入下图进行查看
Dataset of books
你可以利用最下面的 Clone this app 选项复制已经存在的模版作为你开发的基础这些授权信任书可以帮助我们连接到 UI 上, 我们在这篇教程中要使开发的 app 的授权信任模块如下
{ app: "good-books-ds", credentials: "nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d", type: "good-books-ds" }
开启 Reactive search 之旅
我们将使用 ReactiveSearch 来进行开发, 因为 ReactiveSearch 是一个 Elasticsearch 上的 UI 模块的 React 和 React Native 通用的开源库, 它提供了一个丰富的资源库完善的配置环境以及架构, 这样你就可以连接到任何一个 Elasticsearch 的服务器上,
为什么我们需要 ReacttiveSearch 呢?
ReactiveSearch 提供了一整套连接到 Elasticsearch 服务器上的模块, 可以创建队列具有灵活直观的特点并且可以让你的模块可以与其他的模块实现通信, 比如说你创建了一个 A 模块, A 模块实现了升级更新, 这样需要 B 模块可以获取信息并且可以实现不依靠任何关联额自主的实现更新
Reactivesearch-native 上有很多的 nativeUI 模块, 这些可以使你开发 app 的 UI 模块的时候有所借鉴, 让你的 app 变得更加的美观和智能
开发搜索 app
我们需要在我们的 React Native 项目下利用下面的代码安装 reactivesearch-native
yarn add @appbaseio/reactivesearch-native
全部的 ReactiveSearch 的模块都被包装在 ReactiveBase 的容器中,
我们将使用这些在 App.js 中 Adding ReactiveBase component React Native 中的 Styling 和网页类似, 我们这里采用的是 Flex 中的基本 Styling, 如果你之前没有接触过这个 Flex 的话呢, 个人建议你可以尝试从 FlexBox Froggy 开始起步
除了 Stylesheet 以外, 我们的代码中还使用了 React Native 中的两个其他的模块
. View 在 React Native 中和 html 中的 div 元素差不多是一个容器, 可以支持多种操作
. Text 这个是 React Native 中可以查阅相关内容的的模块
在我们设计的 BookSearch app 中, 我们将需要尝试 Reactivesearch-native 中的另外的两个模块:
1. Search box for searching the books:
我们这里将使用 reactivesearch-native 中的 DataSearch 模块去实现多区域的搜索功能, 其核心如下所示
<DataSearch componentId="searchbox" dataField={[ 'original_title', 'original_title.search', 'authors', 'authors.search', ]} placeholder="Search for books" autosuggest={false} />
DataSearch 使用起来相当的方便, 由于其本身就是在 dataFied(s)的队列中, 因此这个模块就可以轻松的帮助我们实现转入到 ReactiveBase 模块中, 并且可以传递和接收一切索引的信息, 这样就不需要我们自己去编写相关的队列算法了
2. Result List View for displaying the search results:
结果展示模块
我们在结果的输出上主要采用的是 reactivesearch-native 中的 ReactiveList 模块:
<ReactiveList componentId="results" dataField="original_title" size={7} showResultStats={false} pagination={true} react={{ and: "searchbox" }} onData={(res) => ( <View style={styles.result}> <Image source={{ uri: res.image }} style={styles.image} /> <View style={styles.item}> <Text style={styles.title}>{res.original_title}</Text> <Text>{res.authors}</Text> </View> </View> )} />
上面的代码是如何工作的呢?
. dataField: 通过 name field 去调整结果
. onData: 接收返回值为 JSX 相关结果的函数, 这是我们常用来查看部分结果的方式
如果你想让你的 app 变得美观, 想要调整一些字体的话, 可以在你的程序里面输入下面的代码
async componentWillMount() { await Expo.Font.loadAsync({ Roboto: require('native-base/Fonts/Roboto.ttf'), Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'), }); }
编后语: 如果你很有兴趣, 还想了解更多, 不妨去看看这两个论坛, 和更多朋友交流下你的想法:
- ReactiveSearch GitHub repo
- ReactiveSearch docs
来源: http://www.tuicool.com/articles/jYVZB3M