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：
npm install -g react-native-cli
安装 Android Studio
前往 Android Studio 官网 下载并安装 Android Studio。
安装依赖
在项目目录下，使用 npm 命令安装依赖：
npm install --save react-native-paper npm install --save react-navigation
2. 创建 ToDo List 应用
首先，在终端中运行以下命令创建一个新的 React Native 项目：
react-native init TodoListApp
然后，在项目目录下创建一个新文件 TodoList.js，并输入以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- ---------- ------- ---- - ---- ---------------------
------ ------- ----- -------- ------- --------- -
-------- -
------ -
----- -------------------------
---------------
--------------- ----------- ----- --
----------------
---------- ---------- ----- ------------------------ --
------- ---------------- -------------------------
---
---------
--------------
---------- ----------- -- --
---------- ----------- -- --
---------- ----------- -- --
---------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
--
---------- -
------- ---
--
---------- -
----------------- ---
--
---以上代码创建了一个包含标题、文本输入框、添加按钮和一个列表的组件。我们使用了 React Native Paper 库中的一些组件，如 Appbar、TextInput、Button 和 List。
使用 StyleSheet 来定义组件样式，并将其传递给组件的 style 属性。
3. 实现添加功能
我们将为 Button 组件添加一个 onPress 属性，以响应添加按钮的点击事件。我们还需要在组件的 state 对象中维护一个名为 items 的数组，以保存每个添加项目的文本。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- ---------- ------- ---- - ---- ---------------------
------ ------- ----- -------- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
----- ---
--
------------ - ------------------------
-
--------- -
-- ----------------------- --- --- -
-------
-
----- ----- - -------------------------
------------ ----- --------------- ---
--------------- ------ ----- -- ---
-
-------- -
------ -
----- -------------------------
---------------
--------------- ----------- ----- --
----------------
----------
---------- -----
-----------------------
------------------ -- --------------- ---- ---
------------------------
--
------- ---------------- ---------------------- -------------------------
---
---------
--------------
---------------------------- ------ -- -
---------- ----------- ----------------- --
---
---------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
--
---------- -
------- ---
--
---------- -
----------------- ---
--
---在 constructor 函数中初始化了 items 和 text 两个状态变量。我们还将 addItem 函数绑定到组件实例上，以确保 this 指向当前组件实例。
在 addItem 函数中，我们首先检查用户输入是否为空，如果是，则函数不执行任何操作。否则，我们将当前 items 数组的副本推入包含输入文本的新项目，并使用 setState 函数更新 items 和 text 两个状态变量。
我们还将 TextInput 组件的 value 属性绑定到 text 状态变量上，以确保在用户输入时更新文本输入框的值。当文本输入框的值更改时，我们在 onChangeText 回调函数中更新 text 状态变量。
最后，我们使用 map 函数来遍历 items 数组，并为每个项目创建一个 List.Item 组件。
4. 使用路由导航
我们将使用 react-navigation 库来添加路由导航功能。首先，在终端中运行以下命令安装该库：
npm install --save react-navigation
接下来，我们需要将 TodoList 组件包装在 StackNavigator 组件中，并导出一个名为 App 的新组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- ---------- ------- ---- - ---- ---------------------
------ - -------------------- - ---- -------------------
------ ------- ----- -------- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
----- ---
--
------------ - ------------------------
-
--------- -
-- ----------------------- --- --- -
-------
-
----- ----- - -------------------------
------------ ----- --------------- ---
--------------- ------ ----- -- ---
-
-------- -
------ -
----- -------------------------
---------------
--------------- ----------- ----- --
----------------
----------
---------- -----
-----------------------
------------------ -- --------------- ---- ---
------------------------
--
------- ---------------- ---------------------- -------------------------
---
---------
--------------
---------------------------- ------ -- -
---------- ----------- ----------------- --
---
---------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
--
---------- -
------- ---
--
---------- -
----------------- ---
--
---
----- --- - ----------------------
----- - ------- -------- --
---
------ ------- ----在代码中，我们首先导入 createStackNavigator 函数，并在 App 组件中使用该函数将 TodoList 组件包装在一个新的路由导航器中。
必须将 App 组件导出为默认组件，否则应用将无法启动。
5. 最终效果和结论
在终端中使用以下命令运行 TodoListApp 应用：
react-native run-android
当应用启动时，你会看到标题为“Todo List”的应用。现在，你可以在文本输入框中输入需要添加的项目，然后点击“Add”按钮来将该项目添加到列表中。
如下所示：
这篇文章中介绍了如何使用 React Native 和 material design 来开发一个简单的 ToDo List 应用。我们通过使用 React Native Paper 库来创建应用中的组件，并使用路由导航器来实现导航功能。我们希望这篇文章可以帮助你进一步了解 React Native 的基础知识和应用开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b43de9babaf620faa6aa7