React Native笔记应用AddNotesScreen点击保存图标无法保存笔记怎么办

问题原因 #

• 保存按钮的点击事件仅执行了页面跳转，没有关联任何笔记保存逻辑
• AddNotesScreen内的标题、内容状态是组件内部state，默认无法在navigationOptions中直接访问
• 内容状态更新函数存在笔误，securrentNoteContent应为setCurrentNoteContent，会导致内容输入异常

修复步骤 #

第一步：修改AddNotesScreen组件，注入保存逻辑到路由参数 #

首先在AddNotesScreen头部引入useEffect：
import React, { useState, useEffect } from "react";
然后修改组件内部逻辑：

const AddNotesScreen = (props) => {
  const [currentNoteTitle, setCurrentNoteTitle] = useState("");
  // 修正setter笔误
  const [currentNoteContent, setCurrentNoteContent] = useState("");

  // 新增：将保存函数注入路由参数
  useEffect(() => {
    props.navigation.setParams({
      saveNote: () => {
        // 过滤完全空白的笔记
        if (!currentNoteTitle.trim() && !currentNoteContent.trim()) return
        const newNote = {
          id: Date.now().toString(),
          title: currentNoteTitle,
          content: currentNoteContent,
          createTime: new Date().toLocaleString()
        }
        // 将新笔记传递到笔记列表页
        props.navigation.navigate("Notes", { newNote })
      }
    })
  }, [currentNoteTitle, currentNoteContent, props.navigation])

  // 修正内容处理函数的setter名称
  const notesContentHandler = (enterdContent) => {
    setCurrentNoteContent(enterdContent);
  };

  // 其余原有代码保持不变
  // ...
}

第二步：修改保存按钮点击事件，调用保存函数 #

更新AddNotesScreen的navigationOptions配置：

AddNotesScreen.navigationOptions = (navData) => {
  return {
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Save"
          iconName="ios-save"
          onPress={() => {
            // 调用路由中注入的保存函数
            navData.navigation.getParam('saveNote')()
          }}
        />
      </HeaderButtons>
    ),
  };
};

第三步：在InitialScreen接收新笔记，更新列表 #

在InitialScreen组件中添加参数监听逻辑，把新收到的笔记加入列表：

// InitialScreen.js内新增
useEffect(() => {
  const newNote = props.navigation.getParam('newNote')
  if (newNote) {
    // 假设你原有笔记列表存在notes状态中，把新笔记加到列表头部
    setNotes(prevNotes => [newNote, ...prevNotes])
  }
}, [props.navigation])

可选：持久化存储笔记 #

如果需要重启应用后笔记依然存在，可以使用@react-native-async-storage/async-storage做本地持久化：

1. 安装依赖：npm i @react-native-async-storage/async-storage
2. 保存笔记时，先读取本地存储的旧笔记列表，加入新笔记后再序列化存回本地
3. InitialScreen初始化时，读取本地存储的笔记列表反序列化后初始化state

内容的提问来源于stack exchange，提问作者Guruprasad Venkatraman