1

我正在使用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 等...不会被触发。

我该怎么做？

4

1 回答 1

0

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

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

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

于 2017-01-13T21:42:20.287 回答