React Navigation跨屏幕调用方法：如何从屏幕B调用ScreenA.refreshStuff()

嘿，这个问题我之前帮好几个开发者捋清楚过，在React Navigation里跨屏幕调用另一个页面的方法，得根据你的场景选合适的方案，给你三个实用的思路：

这是最直接的方案，适合简单的“从子页面触发父页面方法”的场景。核心思路是在从ScreenA跳转到ScreenB的时候，把refreshStuff方法作为参数传递过去，在ScreenB里直接调用这个回调。

类组件示例： #

在ScreenA里跳转时传参：

// ScreenA.js
this.props.navigation.navigate('ScreenB', {
  triggerRefresh: () => this.refreshStuff()
});

在ScreenB里调用回调：

// ScreenB.js
handleButtonPress = () => {
  const { triggerRefresh } = this.props.route.params;
  if (triggerRefresh) {
    triggerRefresh();
  }
};

// 渲染按钮
<Button title="刷新ScreenA" onPress={this.handleButtonPress} />

函数组件示例： #

如果用的是函数组件，借助useNavigation和useRoute钩子实现：

// ScreenA.js（函数组件）
import { useNavigation } from '@react-navigation/native';

const ScreenA = () => {
  const navigation = useNavigation();
  
  const refreshStuff = () => {
    // 你的刷新逻辑，比如重新拉取数据
    console.log('ScreenA刷新了！');
  };

  const goToScreenB = () => {
    navigation.navigate('ScreenB', { triggerRefresh: refreshStuff });
  };

  return <Button title="去ScreenB" onPress={goToScreenB} />;
};

// ScreenB.js（函数组件）
import { useRoute } from '@react-navigation/native';

const ScreenB = () => {
  const route = useRoute();

  return (
    <Button 
      title="触发ScreenA刷新" 
      onPress={() => route.params.triggerRefresh()} 
    />
  );
};

如果你的项目里有多个页面需要调用这个刷新方法，或者刷新逻辑涉及全局状态，用React Context会更优雅。把refreshStuff方法放到全局Context里，任何组件都可以直接获取并调用。

步骤1：创建全局Context #

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

const AppContext = createContext();

export const AppProvider = ({ children }) => {
  // 可以在这里维护需要刷新的状态
  const [screenAData, setScreenAData] = useState([]);

  const refreshStuff = () => {
    // 模拟刷新逻辑：重新获取数据
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(newData => setScreenAData(newData));
  };

  return (
    <AppContext.Provider value={{ refreshStuff, screenAData }}>
      {children}
    </AppContext.Provider>
  );
};

// 自定义钩子，方便组件调用
export const useAppContext = () => useContext(AppContext);

步骤2：用Provider包裹导航容器 #

在App.js里把整个导航结构放到AppProvider里：

// App.js
import { AppProvider } from './AppContext';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <AppProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="ScreenA" component={ScreenA} />
          <Stack.Screen name="ScreenB" component={ScreenB} />
        </Stack.Navigator>
      </NavigationContainer>
    </AppProvider>
  );
}

步骤3：在组件里调用方法 #

不管是ScreenA还是ScreenB，都可以直接通过Context获取refreshStuff：

// ScreenB.js
import { useAppContext } from './AppContext';

const ScreenB = () => {
  const { refreshStuff } = useAppContext();

  return (
    <Button title="刷新ScreenA的数据" onPress={refreshStuff} />
  );
};

如果你的页面层级比较深，或者不想直接传递回调，还可以用React Navigation的事件系统：在ScreenA里订阅一个自定义事件，在ScreenB里触发这个事件，从而执行refreshStuff。

在ScreenA里订阅事件 #

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

const ScreenA = () => {
  const navigation = useNavigation();
  
  const refreshStuff = () => {
    console.log('ScreenA通过事件触发刷新！');
  };

  useEffect(() => {
    // 订阅自定义事件"refreshScreenA"
    const unsubscribe = navigation.addListener('refreshScreenA', () => {
      refreshStuff();
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe;
  }, [navigation]);

  return <Text>我是ScreenA</Text>;
};

在ScreenB里触发事件 #

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

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

  const triggerRefresh = () => {
    // 发布自定义事件
    navigation.dispatch({
      type: 'refreshScreenA'
    });
  };

  return (
    <Button title="触发ScreenA刷新事件" onPress={triggerRefresh} />
  );
};

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