如何在RN平台开发一款用于查找图书数据库的电子商务移动app
发表时间：2023-10-15 13:04:15
文章来源：炫佑科技
浏览次数：201
菏泽炫佑科技
如何在RN平台开发一款用于查找图书数据库的电子商务移动app
编者注：React 正变得越来越流行。 如果你还没有接触过，*好阅读一下作者的入门指南。 他将带您体验基于RN平台开发电商搜索App的精彩旅程！ 本文编译自，原标题：一个用react的e-app，推荐给有一定编程基础的读者。
今天我们就来说说如何在RN平台上开发一款用于搜索图书数据库的电商移动应用。 如果你之前没有使用过 RN，那么现在就和我一起开始你的移动开发之旅吧。
2018年迎来了前所未有的发展。 各种库、框架、开发工具已经相当成熟，整个社区都致力于让上网更加方便快捷。 当然，开发过程中还是会出现一些bug，但是如果你能用的话，这些小问题都不是问题。 您可以使用 JS 来制作 Web 应用程序、后端服务器和移动应用程序。
React 不仅可以利用 /Ionic/ 等架构进行移动 APP 开发，还支持编译，需要时可以编写代码。
您需要提前了解什么
React现在很流行，网上的资源也很多，所以你可以很方便地从网上获取学习资源。 所以，开发RN程序之前*好有一定的学习基础。 如果你是这个项目的新手，可以先尝试学习官方教程。 如果您更喜欢观看视频课程，那么我强烈建议您观看 Kent C. Dodds 的免费课程“The 's Guide”。 到 ”
如果您也了解 ES6+，那就太好了。 这里有一份ES6的入门指南，有了它你就能快速上手。
作为初学者，虽然我建议你认真学习React并开发一些在线应用程序，但如果你想花时间开发自己的程序，也有必要充分了解React的基本结构。 因为React和React有着相同的架构，但*终的目标却不同。 一种是服务Web APP，一种是服务APP。
如果你使用React或者React进行产品开发，你会节省大部分的时间和精力，因为无论是IOS还是平台，都有很多社区其他人共享的代码。 这就是为什么 RN 开发平台被 、、Photo Wall、 和 Tesla 等公司接受并使用它来开发移动应用程序的原因。
基本概念
简要介绍 React 的工作原理以及如何将代码转化为功能强大的移动应用程序。 我们需要知道的是任何 React 应用程序都是双线程的：
1. 主线程
主线程管理程序的用户界面，处理所有本地交互，包括手势和触摸。 因为RN允许在源代码中添加java、C或swift代码，所以这些代码块也可以在这个线程中执行。 这样的发展你觉得舒服吗？
2. 线程
该线程执行编译器中编写的代码（这是iOS平台中默认的，可以通过小部件发送到设备。）
为了使应用程序正常工作，两个线程之间需要一个桥梁进行通信，如下图所示。
反应核心
顾名思义app开发，中间件可以帮助实现线程与主线程之间的数据（信息）处理。 该信息可以异步且批量处理。 中间件确保 JS 代码与本机模块对话并与设备 API 交互。
现在我们已经基本了解了RN的结构，下面介绍一下实现过程。
搭建开发环境
如果你已经安装了RN并且熟悉开发系统，可以跳到下一部分。 如果你刚刚入门，可以按照官方的安装指南（后面会有更详细的介绍），或者按照我下面说的进行安装。 首先确保node和yarn模块已经成功安装在你的电脑上。 我们将使用CRNA（-react--app）工具创建模板并运行以下命令来实现程序“”
-反应--应用程序
光盘
npm 启动
这将为您启动一个可扩展的服务器并向终端输出一个二维码。 使用 CRNA 工具时出现的唯一警告是：
它可能不使用react-
如果出现此警告，您可以使用Expo CLI或Expo XDE来解决。
然后在你的iOS系统或系统上安装Expo，并将你的手机像电脑一样连接到网络。 有了Expo应用程序，你就可以在手机上做到这一点，光是想想就很令人兴奋。 就像下图所示：
反应应用程序
您可以使用yarn ios和yarn命令分别在iOS和模拟器上进行测试，以便您可以运行您的React应用程序。
如果您知道如何在应用程序中打开扩展菜单，您会看到有支持热重载和实时重载的选项。 这些允许您在环境中快速加载您的应用程序
看看
扩展操作也有模块，稍后我们会详细介绍。
调试模块
远程调试JS程序可以让我们查看相关的控制信息和错误信息。 这使得我们的开发和调试过程变得更加容易。 另外，你还需要安装React
反应于
这是一个非常实用的工具，可以帮助我们查看React应用程序中的模块声明和类树。 您还可以查看和编码您开发的应用程序中需要使用的模块。
准备阶段
React 提供了一些用于开发应用程序的基本模块。 您可以在此处的列表中找到React为不同平台提供的相应功能模块。 这些模块可以帮助您开发自己的应用程序，从而使开发过程更加轻松。 。 React支持fetch功能，可以让开发者在开发过程中从服务器获取数据并像处理网页一样处理http请求。
对于我们将要设计的搜索应用程序，我们将使用可以在短时间内遍历大量数据的NoSQL数据架构来开发它。 它将以 JSON 作为对象对所有文档执行全文搜索。
也许你以前没有接触过它，但你必须接受使用它是一种趋势。 您可以从下面的介绍中了解基础知识。
入门并不是那么简单。 设置环境、添加数据、查看数据等对于初学者来说并不是简单的任务。 因此，社区提供了很多开源工具来帮助初学者开发。 。
· 添加数据到
· 数据 查看excel表格中的数据。
· 查询组织和管理关联的队列。
借助这些工具，我们可以直接使用这些工具和React来构建一个强大的移动图书馆应用程序
您可以按照官网的说明安装设计服务器，也可以申请.io账号。 .io提供了专用服务器，比较方便。 因此，我们将使用.io平台来开始我们的开发。
我只是创建了一个基本的数据搜索应用程序，您可以在下图中查看它。
书籍数量
您可以使用底部的“克隆此应用程序”选项来复制现有模板作为您开发的基础。这些授权信任函可以帮助我们连接到 UI。 在本教程中，我们将开发的应用程序的授权信任模块制作如下
应用程序：“好书-ds”，
：“：-18ea-456c-bc5e-”，
类型：“好书-ds”
开始旅程
我们将使用它进行开发，因为它是 React 和 React UI 模块的通用开源库。 它提供了丰富的资源库、完整的配置环境和架构，让您可以连接到任何服务器。 ,
为什么我们需要它？
它提供了一套完整的连接服务器的模块，可以创建队列，灵活直观。 它允许您的模块与其他模块进行通信。 例如，创建模块A，则模块A实现升级和更新。 这就要求模块B能够独立地获取信息并实现更新，而不依赖于任何关联。
- 上面有很多模块，可以帮助您在开发应用程序的UI模块时借鉴它，使您的应用程序更加美观和智能。
开发搜索应用程序
我们需要在我们的 React 项目下使用以下代码安装它 -
纱线添加@/-
所有模块都封装在容器中，
我们将在 App.js 中的 React 中使用它们，类似于网页。 我们这里使用的是 Flex 的基础知识。 如果你之前没有接触过Flex，我个人建议你尝试从头开始。
此外，我们的代码还使用了React中的另外两个模块。
· React中的View几乎就像HTML中的div元素一样是一个容器，可以支持多种操作。
· Text 是 React 中的一个模块如何在RN平台开发一款用于查找图书数据库的电子商务移动app，允许您查看相关内容。
在我们正在设计的应用程序中，我们需要尝试以下两个模块：
1. 书盒：
我们将使用-中的模块来实现多区域搜索功能。 核心如下
=“”
={[
'',
'.',
'',
'.',
]}
=“书籍”
={假}
/>
使用起来相当方便。 由于是在(s)的队列中，所以这个模块可以很方便的帮我们转入模块，并且可以传输和接收所有的索引信息，这样就不需要我们自己动手了。 我们来写一下相关的队列算法。
2. 列表视图：
结果显示模块
我们主要使用-中的模块来进行结果的输出：
=“”
=“”
尺寸={7}
={假}
={真}
反应={{
和： ””
}}
={（资源）=>（
{res.}
{res.}
)}
/>
上面的代码是如何工作的？
· ：通过名称字段调整结果
· ：接收一个函数，其返回值是JSX相关的结果。 这是我们经常用来查看部分结果的方式。
如果你想让你的应用程序美观并调整一些字体，你可以在你的程序中输入以下代码
异步（）{
等待 Expo.Font.({
: ('-base/Fonts/.ttf'),
: ('-base/Fonts/.ttf'),
: ('@expo/-icons/fonts/.ttf'),
});
