React Native Router Flux：跨页面调用函数与返回触发页面方法的方案

嘿，这两个问题都是React Native Router Flux开发中常遇到的场景，我来给你梳理下靠谱的解决方案👇

1. 通过Actions从一个屏幕调用另一个屏幕的函数 #

React Native Router Flux 提供了refs机制来访问已渲染的屏幕组件实例，具体操作分两步：

• 第一步：在目标屏幕暴露可调用的函数
  首先在你要调用的目标屏幕组件中，定义好实例方法（注意用箭头函数或者bind绑定this，避免上下文丢失）：

  class TargetScreen extends Component {
    // 要被外部调用的函数
    externalCallFunction = () => {
      console.log("目标屏幕的函数被触发了");
      // 这里写你的业务逻辑
    }
  
    render() {
      return (
        // 组件渲染内容
      );
    }
  }
  

• 第二步：在发起调用的屏幕通过refs调用
  只要目标屏幕已经被渲染（比如通过Actions.TargetScreen()跳转后），你就可以通过Actions.refs[屏幕key]获取组件实例，然后直接调用函数：

  // 发起调用的屏幕中的方法
  triggerTargetFunction = () => {
    // 先判断refs是否存在，避免报错
    if (Actions.refs.TargetScreen) {
      Actions.refs.TargetScreen.externalCallFunction();
    }
  }
  

  注意：这里的TargetScreen是你在Router配置中给目标屏幕设置的key值，必须完全对应！

2. 返回第一页时触发BacktoFirstPage函数的实现 #

针对从第二页Action.pop()返回时要调用第一页BacktoFirstPage的需求，推荐两种实用方法：

方法一：第二页返回前主动调用（直接直观） #

在第二页执行返回操作前，先获取第一页的组件实例，调用目标函数后再返回：

// 第二屏幕的返回逻辑
handleGoBack = () => {
  // 假设第一屏幕的key是'FirstScreen'
  if (Actions.refs.FirstScreen) {
    Actions.refs.FirstScreen.BacktoFirstPage();
  }
  // 执行返回
  Actions.pop();
}

方法二：第一页监听焦点事件（更健壮） #

如果存在用户用物理返回键返回的情况，这种方法更可靠——第一页在重新获得焦点时自动触发函数：

class FirstScreen extends Component {
  componentDidMount() {
    // 添加焦点监听
    this.focusListener = this.props.navigation.addListener('focus', () => {
      // 触发目标函数
      this.BacktoFirstPage();
    });
  }

  componentWillUnmount() {
    // 移除监听，防止内存泄漏
    this.focusListener();
  }

  BacktoFirstPage = () => {
    console.log("回到第一页，执行BacktoFirstPage函数");
    // 你的业务逻辑代码
  }

  render() {
    return (
      <TouchableOpacity onPress={() => Actions.SecondScreen()}>
        <Text>跳转到第二页</Text>
      </TouchableOpacity>
    );
  }
}

如果需要仅在从第二页返回时触发，可以在跳转第二页时传递一个标识参数，比如：

// 第一页跳转时传参
goToSecondScreen = () => {
  Actions.SecondScreen({ fromFirstPage: true });
}

然后在第一页的focus事件里判断是否来自第二页，再决定是否调用函数，这样更精准。

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