Question

我正在使用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.log来获取此信息：

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等......

我该如何解决这个问题？

Answer 1

如果您不想包含状态容器，这可能看起来有点像反模式，也可能不适合您的设置，但建议将您的应用程序绑定到侦听当前场景中的更改的reducer 。例如，使用redux，您可以通过遵循docs中的示例轻松完成此操作。

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

这有点笨拙，但它可能会起作用。

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

1 个答案: