React Native嵌套TabNavigator中，子屏幕如何调用父屏幕函数？

嘿，这个问题我之前也踩过坑！screenProps确实能把props传给整个子Tab Navigator，但子导航里的单个屏幕没法直接拿到父组件的函数——因为screenProps是传递给子导航容器的，不是它内部的具体屏幕。下面给你几个靠谱的解决方案：

方案1：用React Context共享函数（最推荐） #

这是最灵活的方式，适合复杂嵌套场景，后续扩展也方便：

1. 创建共享Context：

// ParentContext.js
import React, { createContext, useContext } from 'react';

const ParentContext = createContext();

export const ParentProvider = ({ children, parentFunction }) => {
  return (
    <ParentContext.Provider value={{ parentFunction }}>
      {children}
    </ParentContext.Provider>
  );
};

export const useParentContext = () => useContext(ParentContext);

2. 父组件用Provider包裹子导航：
   在父Tab屏幕里，把你的子Tab Navigator放在ParentProvider中，传入要共享的函数：

// ParentScreen.js
import { ParentProvider } from './ParentContext';
import ChildTabNavigator from './ChildTabNavigator';

class ParentScreen extends React.Component {
  callParentFunction = () => {
    // 你的父组件业务逻辑
    console.log('父组件函数被触发啦！');
  };

  render() {
    return (
      <ParentProvider parentFunction={this.callParentFunction}>
        <ChildTabNavigator />
      </ParentProvider>
    );
  }
}

3. 子屏幕调用函数：
   在任意子屏幕里，用自定义Hook获取函数并调用：

// ChildScreen.js
import { useParentContext } from './ParentContext';

const ChildScreen = () => {
  const { parentFunction } = useParentContext();

  return (
    <Button title="调用父组件函数" onPress={parentFunction} />
  );
};

方案2：通过导航参数直接传递函数 #

如果你的场景比较简单，直接把函数作为参数传给子屏幕更直接：

在父组件的子Tab Navigator配置里，给每个需要调用父函数的子屏幕添加initialParams：

// ParentScreen.js里的子导航配置
<ChildTab.Screen
  name="ChildScreen1"
  component={ChildScreen1}
  initialParams={{ callParent: this.callParentFunction }}
/>

然后在子屏幕里通过route.params拿到函数：

// ChildScreen1.js
const ChildScreen1 = ({ route }) => {
  const callParent = route.params.callParent;

  return (
    <Button title="触发父函数" onPress={callParent} />
  );
};

方案3：利用React Navigation的getParent方法 #

如果你不想用Context或参数传递，可以通过导航实例获取父级：

// ChildScreen.js
import { useNavigation } from '@react-navigation/native';

const ChildScreen = () => {
  const navigation = useNavigation();

  const callParentFunction = () => {
    // 获取父级导航实例
    const parentNav = navigation.getParent();
    // 假设父组件把函数存在了screenProps里
    parentNav.props.screenProps.callParentFunction();
  };

  return (
    <Button title="调用父函数" onPress={callParentFunction} />
  );
};

⚠️ 注意：这个方法依赖导航的层级结构，后续如果调整嵌套关系可能会失效，所以优先推荐前两种方案。

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