React Native 实现待办事项列表教程

在这个教程中，我们将学习如何使用 React Native 创建一个简单的待办事项列表应用。这个应用将包括添加新任务、删除任务以及查看所有任务的功能。

前置条件

在开始之前，请确保您已经安装了以下工具：

• React Native CLI
• Node.js

创建项目

首先，您可以使用以下命令创建一个新的 React Native 项目：

npx react-native init TodoListApp

设计界面

在 App.js 文件中，我们可以开始设计我们的待办事项列表界面。以下是基本的界面设计：

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList } from 'react-native';

const App = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const handleAddTask = () => {
    if (task.trim() !== '') {
      setTasks([...tasks, task]);
      setTask('');
    }
  };

  const handleDeleteTask = (index) => {
    const filteredTasks = tasks.filter((_, i) => i !== index);
    setTasks(filteredTasks);
  };

  return (
    <View>
      <TextInput
        placeholder="添加新任务"
        value={task}
        onChangeText={setTask}
      />
      <Button title="添加任务" onPress={handleAddTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <View>
            <Text>{item}</Text>
            <Button title="删除" onPress={() => handleDeleteTask(index)} />
          </View>
        )}
      />
    </View>
  );
};

export default App;

运行应用

在您的终端中，进入项目目录并运行以下命令来启动您的应用：

npx react-native run-android
# 或者
npx react-native run-ios

现在，您应该能够在模拟器或真实设备上看到您的待办事项列表应用。

扩展阅读

如果您想要进一步了解 React Native 和待办事项列表的更多高级功能，请阅读以下文章：

• React Native 官方文档
• React Native 待办事项列表高级教程

希望这个教程对您有所帮助！😊