React Native：非导航下Feed与WriterBox组件实时交互方案

针对你遇到的子组件触发父组件弹窗的场景，有几种实用的处理方式，按复杂度从低到高排序：

1. Props 传递回调函数（最直接方案） #

既然Feed是渲染WriterBox的父组件，直接通过 props 把父组件的弹窗控制逻辑传给子组件即可，完全符合 React 的数据流设计：

修改 Feed 屏幕 #

import { useState } from 'react';

const FeedScreen = () => {
  // 控制弹窗显示状态
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  // 记录要删除的 Feed ID
  const [targetFeedId, setTargetFeedId] = useState(null);

  // 供子组件调用的回调函数
  const handleDeleteRequest = (feedId) => {
    setTargetFeedId(feedId);
    setShowDeleteModal(true);
  };

  // 弹窗确认删除的逻辑
  const confirmDelete = () => {
    // 这里写删除 Feed 的业务逻辑（比如调用 API）
    console.log(`删除 Feed: ${targetFeedId}`);
    setShowDeleteModal(false);
    setTargetFeedId(null);
  };

  return (
    <>
      {/* 渲染 WriterBox 时传递回调 */}
      <WriterBox
        writerAvatar={feed?.user?.avatar}
        writerName={feed?.user?.name}
        writeTime={feed?.createdAt}
        editTime={feed?.updatedAt}
        feedId={feed?.id}
        writerId={feed?.user?.id}
        onDeleteRequest={handleDeleteRequest}
      />

      {/* 提示弹窗，根据状态控制显示 */}
      {showDeleteModal && (
        <YourModalComponent
          visible={showDeleteModal}
          title="确认删除？"
          onConfirm={confirmDelete}
          onCancel={() => setShowDeleteModal(false)}
        />
      )}
    </>
  );
};

修改 WriterBox 组件 #

const WriterBox = ({ onDeleteRequest, feedId, ...restProps }) => {
  const deleteClick = () => {
    // 调用父组件传递的回调，触发弹窗
    onDeleteRequest(feedId);
  };

  return (
    <View>
      {/* 其他组件内容 */}
      <SmallBtn
        text={"삭제"}
        color={"main"}
        pressFunction={deleteClick}
      />
    </View>
  );
};

2. Context API（适合多层级组件场景） #

如果后续组件层级变深，或者多个组件需要触发同一弹窗，可以用 React Context 封装状态逻辑，避免 props 层层传递：

1. 创建 FeedContext #

// FeedContext.js
import { createContext, useContext, useState } from 'react';

const FeedContext = createContext();

export const FeedProvider = ({ children }) => {
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [targetFeedId, setTargetFeedId] = useState(null);

  const openDeleteModal = (feedId) => {
    setTargetFeedId(feedId);
    setShowDeleteModal(true);
  };

  const closeDeleteModal = () => {
    setShowDeleteModal(false);
    setTargetFeedId(null);
  };

  return (
    <FeedContext.Provider value={{ showDeleteModal, targetFeedId, openDeleteModal, closeDeleteModal }}>
      {children}
    </FeedContext.Provider>
  );
};

export const useFeedContext = () => useContext(FeedContext);

2. 在 Feed 屏幕中使用 Context #

import { useFeedContext } from './FeedContext';

const FeedScreen = () => {
  const { showDeleteModal, targetFeedId, closeDeleteModal } = useFeedContext();

  const confirmDelete = () => {
    // 删除逻辑
    console.log(`删除 Feed: ${targetFeedId}`);
    closeDeleteModal();
  };

  return (
    <>
      <WriterBox
        writerAvatar={feed?.user?.avatar}
        writerName={feed?.user?.name}
        writeTime={feed?.createdAt}
        editTime={feed?.updatedAt}
        feedId={feed?.id}
        writerId={feed?.user?.id}
      />

      {showDeleteModal && (
        <YourModalComponent
          visible={showDeleteModal}
          onConfirm={confirmDelete}
          onCancel={closeDeleteModal}
        />
      )}
    </>
  );
};

// 在路由或父组件中包裹 Provider
const FeedWrapper = () => (
  <FeedProvider>
    <FeedScreen />
  </FeedProvider>
);

3. 在 WriterBox 中调用 Context 方法 #

import { useFeedContext } from './FeedContext';

const WriterBox = ({ feedId, ...restProps }) => {
  const { openDeleteModal } = useFeedContext();

  const deleteClick = () => {
    openDeleteModal(feedId);
  };

  return (
    <View>
      <SmallBtn
        text={"삭제"}
        color={"main"}
        pressFunction={deleteClick}
      />
    </View>
  );
};

3. 状态管理库（适合大型项目） #

如果项目规模较大、状态交互复杂，可以用轻量状态库如 Zustand，或者 Redux 来统一管理状态：

示例（Zustand） #

// store.js
import { create } from 'zustand';

export const useFeedStore = create((set) => ({
  showDeleteModal: false,
  targetFeedId: null,
  openDeleteModal: (feedId) => set({ showDeleteModal: true, targetFeedId: feedId }),
  closeDeleteModal: () => set({ showDeleteModal: false, targetFeedId: null }),
}));

在 Feed 屏幕和 WriterBox 中直接调用 store 方法即可，用法和 Context 类似，但无需包裹 Provider，更简洁。

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