реакция native - когда маршрут «resetTo», без анимации

Question

Я использую компонент навигатора.
У меня есть всплеск сцены, и через 1 секунду следующая сцена будет показана.
Мне нужно, чтобы стек стека был сброшен после окончания всплеска.
Когда я использую метод resetTo, переход между сценами согласуется без анимации.
Как я могу сделать анимацию?

Answer 1

Для тех, кто видящего эту тему НЕ используйте SetTimeout! Это действительно уродливое и абсолютно не ремонтируемое и масштабируемое. Для этого уже есть что-то построенное.

Вы можете использовать onDidFocus, и он отлично работает!

http://facebook.github.io/react-native/releases/0.25/docs/navigator.html#ondidfocus

navigatorDidFocusHandler = route => { 
    // call immediatelyResetRouteStack here 
}; 

Но будьте осторожны, сбрасывая стек маршрута вызывает render. Поэтому не забудьте правильно это обработать.

Answer 2

Попробуйте использовать popToTop() вместо resetTo (маршрут). Это должно сделать анимацию на любом экране.

Вот список всех методов навигатора: https://facebook.github.io/react-native/docs/navigator.html#content

Answer 3

У меня была такая же проблема, как сейчас нет прямой способ сделать это, поэтому, пока он слит, я использую следующие как обходной путь.

Первый толчок, а затем вызвать immediatelyResetRouteStack с SetTimeout

goToScene(route) { 
    this.navigator.push(route); 
    setTimeout(()=>{ 
     this.navigator.immediatelyResetRouteStack([route]); 
    }, 800); 
} 

Answer 4

Вы можете сделать обходной путь с некоторым кодом, используя onDidFocus опоры и передачи объекта в navigator.push() быть обработан с navigator.immediatelyResetRouteStack, что-то вроде этого:

renderScene(route, navigator) { 
    switch (route.name) { 
     case 'Home': 
     return (<Home navigator={navigator} {...route.props} />); 
     case 'User': 
     return (<User navigator={navigator} {...route.props} />); 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Navigator 
      ref='navigator' 
      initialRoute={{ name: 'Home' }} 
      renderScene={this.renderScene} 
      onDidFocus={(route) => { 
      if (route.reset) { 
       this.refs.navigator.immediatelyResetRouteStack([{ name: route.name }]) 
      } 
      }} 
      /> 
     </View> 
    ); 
    } 

И сделать магии вы называете navigator.push так:

navigator.push({ name: 'Home', reset: true }) 

это анимированное дома и сброса стека для вас;)

Answer 5

Я столкнулся с проблемой, когда immediatelyResetRouteStack() размонтировал мой компонент EventIndex и перемонтировал его новый экземпляр.

Это вызывает проблемы, потому что EventIndex имеет setState() вызов в componentDidMount(). В основном предыдущий экземпляр EventIndex вызывал setState() на себя после того, как он был размонтирован (или что-то в этом роде).

Итак, если вы хотите избежать этой проблемы, вы можете передать маршрут как аргумент immediatelyResetRouteStack, а не просто пропустить название маршрута.

Вместо этого navigator.immediatelyResetRouteStack([{ name: route.name }])

Вы можете просто пройти маршрут как этот navigator.immediatelyResetRouteStack([ route ])

Таким образом, следующая сцена не будет монтирования и размонтирования как новый экземпляр во время навигации.