基于 React Native 与 material design 实现 ToDo List 应用

React Native 是一个基于 React 的框架,可以让开发者使用 Javascript 和 React 的思想来开发原生 iOS 和 Android 应用。Material design 是一种谷歌推出的设计风格,旨在为 Android 平台提供一致的设计体验。在这篇文章中,我们将使用 React Native 和 material design 来开发一个简单的 ToDo List 应用。

1. 准备工作

在开始之前,你需要先安装 React Native 和 Android Studio,以及所有相关的依赖。你也可以选择使用 Expo 工具来简化开发流程。

安装 React Native

使用 npm 命令安装 React Native:

--- ------- -- ----------------

安装 Android Studio

前往 Android Studio 官网 下载并安装 Android Studio。

安装依赖

在项目目录下,使用 npm 命令安装依赖:

--- ------- ------ ------------------
--- ------- ------ ----------------

2. 创建 ToDo List 应用

首先,在终端中运行以下命令创建一个新的 React Native 项目:

------------ ---- -----------

然后,在项目目录下创建一个新文件 TodoList.js,并输入以下代码:

------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- ---------- ------- ---- - ---- ---------------------

------ ------- ----- -------- ------- --------- -
  -------- -
    ------ -
      ----- -------------------------
        ---------------
          --------------- ----------- ----- --
        ----------------
        ---------- ---------- ----- ------------------------ --
        ------- ---------------- -------------------------
          ---
        ---------
        --------------
          ---------- ----------- -- --
          ---------- ----------- -- --
          ---------- ----------- -- --
        ---------------
      -------
    --
  -
-

----- ------ - -------------------
  ---------- -
    ----- --
    ---------------- -------
  --
  ---------- -
    ------- ---
  --
  ---------- -
    ----------------- ---
  --
---

以上代码创建了一个包含标题、文本输入框、添加按钮和一个列表的组件。我们使用了 React Native Paper 库中的一些组件,如 AppbarTextInputButtonList

使用 StyleSheet 来定义组件样式,并将其传递给组件的 style 属性。

3. 实现添加功能

我们将为 Button 组件添加一个 onPress 属性,以响应添加按钮的点击事件。我们还需要在组件的 state 对象中维护一个名为 items 的数组,以保存每个添加项目的文本。

------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- ---------- ------- ---- - ---- ---------------------

------ ------- ----- -------- ------- --------- -
  ------------------ -
    -------------
    ---------- - -
      ------ ---
      ----- ---
    --
    ------------ - ------------------------
  -

  --------- -
    -- ----------------------- --- --- -
      -------
    -
    ----- ----- - -------------------------
    ------------ ----- --------------- ---
    --------------- ------ ----- -- ---
  -

  -------- -
    ------ -
      ----- -------------------------
        ---------------
          --------------- ----------- ----- --
        ----------------
        ----------
          ---------- -----
          -----------------------
          ------------------ -- --------------- ---- ---
          ------------------------
        --
        ------- ---------------- ---------------------- -------------------------
          ---
        ---------
        --------------
          ---------------------------- ------ -- -
            ---------- ----------- ----------------- --
          ---
        ---------------
      -------
    --
  -
-

----- ------ - -------------------
  ---------- -
    ----- --
    ---------------- -------
  --
  ---------- -
    ------- ---
  --
  ---------- -
    ----------------- ---
  --
---

constructor 函数中初始化了 itemstext 两个状态变量。我们还将 addItem 函数绑定到组件实例上,以确保 this 指向当前组件实例。

addItem 函数中,我们首先检查用户输入是否为空,如果是,则函数不执行任何操作。否则,我们将当前 items 数组的副本推入包含输入文本的新项目,并使用 setState 函数更新 itemstext 两个状态变量。

我们还将 TextInput 组件的 value 属性绑定到 text 状态变量上,以确保在用户输入时更新文本输入框的值。当文本输入框的值更改时,我们在 onChangeText 回调函数中更新 text 状态变量。

最后,我们使用 map 函数来遍历 items 数组,并为每个项目创建一个 List.Item 组件。

4. 使用路由导航

我们将使用 react-navigation 库来添加路由导航功能。首先,在终端中运行以下命令安装该库:

--- ------- ------ ----------------

接下来,我们需要将 TodoList 组件包装在 StackNavigator 组件中,并导出一个名为 App 的新组件。

------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- ---------- ------- ---- - ---- ---------------------
------ - -------------------- - ---- -------------------

------ ------- ----- -------- ------- --------- -
  ------------------ -
    -------------
    ---------- - -
      ------ ---
      ----- ---
    --
    ------------ - ------------------------
  -

  --------- -
    -- ----------------------- --- --- -
      -------
    -
    ----- ----- - -------------------------
    ------------ ----- --------------- ---
    --------------- ------ ----- -- ---
  -

  -------- -
    ------ -
      ----- -------------------------
        ---------------
          --------------- ----------- ----- --
        ----------------
        ----------
          ---------- -----
          -----------------------
          ------------------ -- --------------- ---- ---
          ------------------------
        --
        ------- ---------------- ---------------------- -------------------------
          ---
        ---------
        --------------
          ---------------------------- ------ -- -
            ---------- ----------- ----------------- --
          ---
        ---------------
      -------
    --
  -
-

----- ------ - -------------------
  ---------- -
    ----- --
    ---------------- -------
  --
  ---------- -
    ------- ---
  --
  ---------- -
    ----------------- ---
  --
---

----- --- - ----------------------
  ----- - ------- -------- --
---

------ ------- ----

在代码中,我们首先导入 createStackNavigator 函数,并在 App 组件中使用该函数将 TodoList 组件包装在一个新的路由导航器中。

必须将 App 组件导出为默认组件,否则应用将无法启动。

5. 最终效果和结论

在终端中使用以下命令运行 TodoListApp 应用:

------------ -----------

当应用启动时,你会看到标题为“Todo List”的应用。现在,你可以在文本输入框中输入需要添加的项目,然后点击“Add”按钮来将该项目添加到列表中。

如下所示:

这篇文章中介绍了如何使用 React Native 和 material design 来开发一个简单的 ToDo List 应用。我们通过使用 React Native Paper 库来创建应用中的组件,并使用路由导航器来实现导航功能。我们希望这篇文章可以帮助你进一步了解 React Native 的基础知识和应用开发过程。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671b43de9babaf620faa6aa7