функция вызова при маршрутизации со сцены на другую

Я использую 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 и т. д. не запускаются.

Как мне это сделать?


person splunk    schedule 13.01.2017    source источник


Ответы (1)


Это может показаться немного антипаттерном, а также может не подходить для вашей установки, если вы не хотите включать контейнер состояния, но рекомендуется привязать ваше приложение к редьюсеру, который прослушивает изменения в текущей сцене. Например, с помощью Redux вы можете легко сделать это, следуя примеру в документы.

Затем редуктор будет запускаться каждый раз, когда меняется сцена приложения, и с этой информацией, я думаю, вы можете применить любую пользовательскую логику. Вы не должны делать это в редьюсере (именно там находится бит антипаттерна), но вы можете передать это значение вашему компоненту и наблюдать prop в componentWillReceiveProps или любой другой подходящий метод жизненного цикла. Сравнив nextProps с вашим текущим props, вы можете сделать вывод о том, что сделал пользователь.

Это немного хакерски, но это может сработать.

person martinarroyo    schedule 13.01.2017