React Native 是一种使用 JavaScript 编写移动应用的框架。它可以帮助开发者快速地构建跨平台的移动应用程序。本篇文章将讨论如何使用 React Native 构建一个外卖购物车应用程序，并使用 Material Design 风格来美化界面。
准备工作
在开始构建应用程序之前，我们需要确保一些先决条件已经满足：
Node.js 和 npm 已经安装
React Native 的 CLI 工具已经安装
Android 或 iOS 开发环境已经安装
创建新项目
在命令行中，使用 React Native CLI 工具创建新项目：
npx react-native init FoodCart
这个命令将在当前目录下创建一个名为 "FoodCart" 的新项目。
配置 Material Design
在项目中，我们将使用 react-native-paper 库来实现 Material Design 风格。可以通过以下命令安装：
npm install react-native-paper
安装完成后，我们可以在 App.js 文件中引入所需的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ - -------- -- ------------- - ---- ---------------------
------ ------- -------- ----- -
------ -
---------------
----- -------------------------
----------- -------------
-------
----------------
--
-这个应用程序会在屏幕中心显示一个文本 "Hello World!"，并使用 Material Design 风格装饰。
创建购物车列表
现在我们将创建购物车应用程序的核心部分 - 购物车列表。
首先，我们需要定义一个结构来表示购物车中的物品：
const cartItems = [
{ id: 1, name: 'Hamburger', price: 5.99, quantity: 1 },
{ id: 2, name: 'French Fries', price: 2.99, quantity: 2 },
{ id: 3, name: 'Soda', price: 1.99, quantity: 3 },
];这个结构包含每个物品的名称、价格和数量。
接下来，我们将使用 FlatList 组件来创建购物车列表。同时，将使用 Card 和 List.Item 组件来渲染每个购物车物品。
-- -------------------- ---- -------
------ - -------- - ---- ---------------
------ - ----- ---- - ---- ---------------------
-------- ---------- -
------ -
------
---------
----------------
-------------- ---- -- -- -
----------
-----------------
--------------------------------------- - ------------------
--------- -- -
------------------- - ---------------------------------
--
--
--
-------------------- -- -------------------
--
-------
--
-在这个部分，我们使用 FlatList 组件来渲染购物车列表。在渲染每个购物车物品时，我们将使用 List.Item 组件来显示物品的名称、价格、数量和总价。right 属性用于在每个 List.Item 右侧显示物品的总价。
添加菜单按钮
现在我们将添加一个菜单按钮，使用户可以添加或删除购物车物品。
首先，我们需要定义一个 FAB 组件，并使用 useState 钩子来存储购物车物品的数量。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ - -------- -- -------------- --- - ---- ---------------------
-------- ----- -
----- --------------- ----------------- - ------------
------ -
---------------
----- -------------------------
--------- --
----
------------------
-----------
----------- -- ------------------------------ - ---
--
----------------------------
-------
----------------
--
-在这个部分，我们定义了一个 FAB 组件，当按钮被按下时，购物车物品数量加一。
结论
本文介绍了如何使用 React Native 和 Material Design 风格构建一个外卖购物车应用程序。我们使用了 FlatList、Card 和 List.Item 组件来构建购物车列表，并添加一个 FAB 组件来添加或删除购物车物品。
这个应用程序实现了一个最基本的购物车功能，但仍然有很多地方需要改进。例如，我们可以添加一个物品详细对话框，以允许用户编辑物品的数量或从购物车中删除物品。无论如何，希望这篇文章可以成为你开始使用 React Native 开发移动应用程序的好起点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b76439babaf620fabd12d