如何跨越中间组件（如TabNavigator）实现Props从组件A到C的传递？

我来帮你搞定这个跨多层组件传Props的问题，针对你提到的TabNavigator夹在中间的场景，这里有几个实用的解决方案，你可以根据自己的需求选择：

方案一：React Context（推荐跨多层传递场景） #

Context是React官方提供的跨组件传递数据的方案，不用一层一层手动传Props，非常适合这种中间隔了TabNavigator的情况。

步骤很简单：

1. 先创建一个Context文件（比如AppContext.js）：

import React, { createContext, useContext } from 'react';

// 创建Context
const AppContext = createContext();

// 自定义Hook方便消费
export const useAppContext = () => useContext(AppContext);

// 导出Provider组件
export default AppContext.Provider;

2. 在你的Home.js里用Provider包裹TabNavigator，把需要传递的方法放进去：

import AppContextProvider from './AppContext';

export default class Home extends Component {
  render() {
    const changeScreen = () => this.props.navigation.navigate('Profile');
    
    return (
      <View style={{ flex: 1 }}>
        <AppContextProvider value={{ changeScreen }}>
          <TabNavigator />
        </AppContextProvider>
      </View>
    );
  }
}

3. 在ChatScreen.js里用自定义Hook获取这个方法：

import { useAppContext } from './AppContext';

export default function ChatScreen() {
  const { changeScreen } = useAppContext();
  
  return (
    <View style={{ flex: 1 }}>
      <Button onPress={changeScreen} title="Go to Profile" />
    </View>
  );
}

要是你还在用类组件，也可以用AppContext.Consumer来包裹：

import AppContext from './AppContext';

export default class ChatScreen extends Component {
  render() {
    return (
      <AppContext.Consumer>
        {({ changeScreen }) => (
          <View style={{ flex: 1 }}>
            <Button onPress={changeScreen} title="Go to Profile" />
          </View>
        )}
      </AppContext.Consumer>
    );
  }
}

方案二：通过React Navigation的参数传递 #

如果你的需求只是在初始化时传递数据，可以利用导航的参数机制来实现：

1. 修改Home.js，把方法通过props传给TabNavigator：

export default class Home extends Component {
  render() {
    const changeScreen = () => this.props.navigation.navigate('Profile');
    
    return (
      <View style={{ flex: 1 }}>
        <TabNavigator changeScreen={changeScreen} />
      </View>
    );
  }
}

2. 修改TabNavigator.js，把方法传递给目标屏幕：

// 假设你用的是React Navigation 5+版本
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const MainScreenNavigator = createBottomTabNavigator();

export default function TabNavigator({ changeScreen }) {
  return (
    <MainScreenNavigator.Navigator>
      <MainScreenNavigator.Screen 
        name="tab1" 
        component={ChatScreen}
        initialParams={{ changeScreen }}
      />
      <MainScreenNavigator.Screen name="tab2" component={NoMatterScreen} />
    </MainScreenNavigator.Navigator>
  );
}

3. 在ChatScreen.js里直接获取使用：

export default class ChatScreen extends Component {
  render() {
    const { changeScreen } = this.props.route.params;
    return (
      <View style={{ flex: 1 }}>
        <Button onPress={changeScreen} title="Go to Profile" />
      </View>
    );
  }
}

方案三：状态管理库（适合复杂全局场景） #

如果你的应用有大量跨组件共享的状态或逻辑，Redux、Zustand这类状态管理库会更合适。把changeScreen相关逻辑放到全局状态里，ChatScreen直接从状态中获取方法即可。不过这个方案相对重一些，要是只是传单个方法，前面两种方案就足够了。

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