从一个场景路由到另一个场景时调用函数答案

【问题标题】：call function when routing from a scene to another one从一个场景路由到另一个场景时调用函数
【发布时间】：2017-01-13 14:54:58
【问题描述】：

我正在使用react-native-router-flux，这是我的路由代码：

<Router navigationBarStyle={navBar} sceneStyle={{ paddingTop: 53}}>
  <Scene key="main">       
    <Scene
      key="firstPage"  
      component={FirstPage}
      initial
    />

    <Scene 
      key="secondPage"
      component={SecondPage}
    />
  </Scene>
</Router>

这是FirstPage 组件的一部分：

class FirstPage extends Component {
  constructor(props) {
    console.log("constructor");
    super(props);
  }

  componentWillMount(){
    console.log("COMPONENT WILL MOUNT");
  }

  componentDidMount(){
    console.log("COMPONENT DID MOUNT");
  }

  componentWillReceiveProps(){
    console.log("COMPONENT WILL RECEIVE PROPS");
  }

  shouldComponentUpdate(){
    console.log("SHOULD COMPONENT UPDATE")
  }

  componentDidUpdate(){
    console.log("COMPONENT DID UPDATE");
  }

  componentWillUnmount(){
    console.log("COMPONENT WILL UNMOUNT");
  }
}

打开我的应用程序后，FirstPage 组件已加载，我通过console.logs 得到了这个：

COMPONENT WILL MOUNT
COMPONENT DID MOUNT
SHOULD COMPONENT UPDATE

当我单击将我发送到secondPage 键的按钮时，加载 SecondPage，组件 console.logs 给我这个：

COMPONENT WILL RECEIVE PROPS
SHOULD COMPONENT UPDATE

到这里为止，一切都好。我想要的是能够在我从SecondPage 返回到FirstPage 时触发一个函数。当我回到FirstPage 时，构造函数、componentWillMount、componentDidMount 等……都没有被触发。

我该怎么做？

【问题讨论】：

标签： reactjs react-native react-native-router-flux

【解决方案1】：

这可能看起来有点反模式，如果您不想包含状态容器，它可能不适合您的设置，但建议将您的应用绑定到监听当前场景变化的减速器.例如，使用 redux，您可以按照 docs 中的示例轻松做到这一点。

然后，每次应用程序的场景更改时都会触发 reducer，并且我认为您可以应用这些信息来应用任何自定义逻辑。您不应该在 reducer 中执行此操作（即反模式位所在的位置），但您可以做的是将该值传递给您的组件并观察 componentWillReceiveProps 中的 prop 或任何其他适当的生命周期方法。通过将nextProps 与您当前的props 进行比较，您可以推断出用户做了什么。

这有点hacky，但它可能会完成这项工作。

【讨论】：