一、核心知识点：简易记事本 核心实现逻辑

1、用到的纯内置组件

所有组件均为 React Native 自带，是开发基础界面与交互的必备能力：

• View：布局容器，用于组织界面结构；
• Text：文本展示，用于显示笔记内容、提示文字；
• TextInput：文本输入框，用于输入笔记内容；
• TouchableOpacity：可点击按钮组件，用于 “添加笔记”“删除笔记” 的交互；
• FlatList：高性能列表组件，用于展示笔记列表；
• useState：React 内置状态钩子，用于管理笔记数据、输入框内容的状态。

2、核心功能逻辑

简易记事本的功能逻辑极简，仅需 3 步即可完成闭环：

1. 状态管理：用 useState 维护两个状态 —— notes（存储所有笔记的数组）、inputText（存储输入框当前内容）；
2. 添加笔记：输入内容后，点击 “添加” 按钮，将输入内容包装为包含唯一 id 的笔记对象，添加到 notes 数组中；
3. 删除笔记：点击单条笔记右侧的 “删除” 按钮，根据笔记的唯一 id 过滤 notes 数组，移除对应项；
4. 列表展示：用 FlatList 渲染 notes 数组，展示所有笔记内容。

二、实战：简易记事本 APP 完整代码实现

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet, Alert} from 'react-native';

type Note = {
  id: string;
  content: string;
};

const SimpleNotepad = () => {
  // 1. 状态管理：存储所有笔记 + 输入框当前内容
  const [notes, setNotes] = useState<Note[]>([]);
  const [inputText, setInputText] = useState('');

  // 2. 添加笔记功能：输入非空时，生成唯一id的笔记并添加到列表
  const handleAddNote = () => {
    if (!inputText.trim()) {
      // 空输入时提示
      Alert.alert('请输入笔记内容');
      return;
    }
    // 生成唯一id
    const newNote: Note = {
      id: Date.now().toString(),
      content: inputText.trim(),
    };
    // 更新笔记列表
    setNotes([newNote, ...notes]);
    // 清空输入框
    setInputText('');
  };

  // 3. 删除笔记功能：根据id过滤掉对应的笔记
  const handleDeleteNote = (noteId: string) => {
    setNotes(notes.filter(note => note.id !== noteId));
  };

  // 4. 渲染单条笔记项
  const renderNoteItem = ({ item }: { item: Note }) => (
    <View style={styles.noteItem}>
      <Text style={styles.noteContent}>{item.content}</Text>
      <TouchableOpacity
        style={styles.deleteBtn}
        onPress={() => handleDeleteNote(item.id)}
      >
        <Text style={styles.deleteBtnText}>删除</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      {/* 输入区域：输入框 + 添加按钮 */}
      <View style={styles.inputArea}>
        <TextInput
          style={styles.input}
          placeholder="请输入笔记内容..."
          value={inputText}
          onChangeText={setInputText}
          multiline={true} 
          placeholderTextColor="#999"
        />
        <TouchableOpacity style={styles.addBtn} onPress={handleAddNote}>
          <Text style={styles.addBtnText}>添加笔记</Text>
        </TouchableOpacity>
      </View>

      {/* 笔记列表区域：无笔记时显示提示，有笔记时渲染列表 */}
      <View style={styles.listArea}>
        {notes.length === 0 ? (
          <Text style={styles.emptyTip}>暂无笔记，快来添加吧~</Text>
        ) : (
          <FlatList
            data={notes}
            renderItem={renderNoteItem}
            keyExtractor={(item) => item.id} // 用唯一id作为key，避免重复警告
            ItemSeparatorComponent={() => <View style={styles.noteSeparator} />}
          />
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f7f8fa',
    padding: 15,
  },
  inputArea: {
    marginBottom: 20,
  },
  input: {
    minHeight: 80,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#e5e5e5',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    color: '#333',
    marginBottom: 10,
  },
  addBtn: {
    backgroundColor: '#007DFF',
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: 'center',
  },
  addBtnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
  listArea: {
    flex: 1,
  },
  emptyTip: {
    color: '#999',
    fontSize: 14,
    textAlign: 'center',
    marginTop: 50,
  },
  noteItem: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  noteContent: {
    fontSize: 16,
    color: '#333',
    flex: 1,
    marginRight: 10,
  },
  deleteBtn: {
    backgroundColor: '#F53F3F',
    borderRadius: 4,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  deleteBtnText: {
    color: '#fff',
    fontSize: 12,
  },
  noteSeparator: {
    height: 10,
    backgroundColor: '#f7f8fa',
  },
});

export default SimpleNotepad;

三、OpenHarmony6.0 专属避坑指南

以下是开发记事本时的高频问题及鸿蒙端解决方案，均经过真机实测验证：

四、扩展用法：记事本功能升级（纯内置 / 轻量依赖）

基于上述基础版，可通过以下方式升级功能，适配更复杂的业务场景：

1、添加笔记编辑功能

在 renderNoteItem 中，给笔记内容添加点击事件，将内容回显到输入框，修改后重新保存（需新增 “保存” 按钮逻辑）。

2、本地持久化存储（轻量依赖）

若需要关闭 APP 后保留笔记，可使用 @react-native-async-storage/async-storage（RN 官方推荐的本地存储库），在 useEffect 中读取存储的笔记，在 setNotes 时同步存储。

3、添加笔记时间戳

在 Note 类型中新增 time 字段，记录笔记添加时间，渲染时展示在笔记内容下方，提升记事本的实用性。

五、总结

本次实现的简易记事本 APP 是纯 React Native 内置组件开发，无任何第三方依赖，完整覆盖 “增、删、展示” 核心功能，适配 OpenHarmony6.0 全机型。

该案例的核心是状态管理 + 内置组件组合：用 useState 维护数据，用 TextInput 处理输入，用 FlatList 展示列表，用 TouchableOpacity 实现交互，是 React Native 鸿蒙跨平台开发的基础典型案例。

代码可直接复制到项目中运行，修改样式或扩展功能即可快速适配实际需求，是零基础入门鸿蒙 RN 开发的优质实践案例。