React Native中父组件触发子组件函数的更优实现方案

下面是几种简洁通用的解决方式，覆盖无状态管理、轻量状态管理两种场景：

一、无需状态管理：利用React Navigation的Params传递函数 #

这是最直接的方案，不需要额外依赖或复杂的ref操作，完全借助React Navigation自身的参数机制：

1. 在HomeScreen中，将deleteSelected函数通过navigation.setParams传递到导航参数中：

export default function HomeScreen({ navigation }) {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);

  const deleteSelected = () => {
    // 你的删除逻辑示例
    setItems(items.filter(item => !selectedItems.includes(item.id)));
    setSelectedItems([]);
  };

  // 组件挂载/函数更新时同步到导航参数
  useEffect(() => {
    navigation.setParams({ deleteSelected });
  }, [navigation, deleteSelected]);

  // ...其他渲染逻辑
}

2. 在导航配置的options中，通过route.params获取该函数并绑定到按钮点击：

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen
      name="home"
      component={HomeScreen}
      options={({ route }) => ({
        headerRight: () => (
          <View style={{ marginRight: 15 }}>
            <Icon
              name="delete"
              type="material"
              // 用可选链避免初始状态下的undefined报错
              onPress={() => route.params?.deleteSelected()}
            />
          </View>
        ),
      })}
    />
    {/* 其他屏幕配置 */}
  </Stack.Navigator>
</NavigationContainer>

这种方式的优势是无需额外代码，完全贴合React Navigation的设计，比forwardRef方案更简洁。

二、轻量状态管理：Zustand实现跨组件调用 #

如果你的应用后续会有更多跨组件的状态操作，用Zustand这类轻量状态管理工具会让代码结构更清晰：

1. 安装Zustand：

npm install zustand
# 或 yarn add zustand

2. 创建待办事项Store（比如src/stores/todoStore.js）：

import { create } from 'zustand';

export const useTodoStore = create((set) => ({
  // 全局状态
  items: [],
  selectedItems: [],
  // 状态操作方法
  addItem: (item) => set(state => ({ items: [...state.items, item] })),
  toggleSelectItem: (itemId) => set(state => ({
    selectedItems: state.selectedItems.includes(itemId)
      ? state.selectedItems.filter(id => id !== itemId)
      : [...state.selectedItems, itemId]
  })),
  deleteSelected: () => set(state => ({
    items: state.items.filter(item => !state.selectedItems.includes(item.id)),
    selectedItems: []
  }))
}));

3. 在HomeScreen中使用Store的状态和方法：

import { useTodoStore } from '../stores/todoStore';

export default function HomeScreen({ navigation }) {
  // 从Store获取状态和操作方法
  const items = useTodoStore(state => state.items);
  const selectedItems = useTodoStore(state => state.selectedItems);
  const toggleSelectItem = useTodoStore(state => state.toggleSelectItem);

  // ...渲染待办列表，绑定toggleSelectItem等逻辑
}

4. 在导航栏按钮中直接调用Store的deleteSelected：

import { useTodoStore } from './src/stores/todoStore';

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen
      name="home"
      component={HomeScreen}
      options={() => ({
        headerRight: () => {
          const deleteSelected = useTodoStore(state => state.deleteSelected);
          return (
            <View style={{ marginRight: 15 }}>
              <Icon
                name="delete"
                type="material"
                onPress={deleteSelected}
              />
            </View>
          );
        },
      })}
    />
  </Stack.Navigator>
</NavigationContainer>

Zustand的优势是把状态和操作逻辑抽离到全局Store，任何组件都可以直接调用，不需要传递函数或使用ref，适合中大型应用的状态管理。

三、补充：forwardRef + useImperativeHandle方案 #

如果你确实需要用ref方式实现，这里给出简洁的实现（但相比前两种方案更繁琐）：

1. 将HomeScreen改为forwardRef组件，并暴露deleteSelected方法：

import { forwardRef, useImperativeHandle } from 'react';

const HomeScreen = forwardRef(({ navigation }, ref) => {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);

  const deleteSelected = () => {
    setItems(items.filter(item => !selectedItems.includes(item.id)));
    setSelectedItems([]);
  };

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({ deleteSelected }));

  // ...其他渲染逻辑
});

export default HomeScreen;

2. 在App组件中创建ref并传递给HomeScreen：

import { useRef } from 'react';

export default function App() {
  const homeScreenRef = useRef(null);

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="home"
          // 传递ref给屏幕组件
          component={(props) => <HomeScreen {...props} ref={homeScreenRef} />}
          options={() => ({
            headerRight: () => (
              <View style={{ marginRight: 15 }}>
                <Icon
                  name="delete"
                  type="material"
                  onPress={() => homeScreenRef.current?.deleteSelected()}
                />
              </View>
            ),
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这种方案适合特定场景，但日常开发中更推荐前两种方案。

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