Реагировать на задержку Android во время анимации

Question

Я испытываю отставание во время переходной анимации, когда Navigator переходит под сцену ShiftEdit. Анимация начинается сразу, но она останавливается на миллисекунду. InteractionManager используется для отсрочки рендеринга четырех компонентов сборщика. Каждый компонент сборщика имеет список элементов, построенных из массива. Есть много предметов. Возможно ли, что это вычисляется, даже если компонент выбора еще не отображается в ShiftEdit, и это является причиной задержки? Не могли бы вы мне помочь, пожалуйста?

'use strict' 
    import React, {View, Text, StyleSheet, InteractionManager, TouchableOpacity} from 'react-native'; 
    import { connect } from 'react-redux'; 
    import Spinner from 'react-native-spinkit'; 
    import StyleCommon from '../styles'; 
    import TimePicker from '../components/time-picker'; 
    import ColorPicker from '../components/color-picker'; 
    import LabelPicker from '../components/label-picker'; 


    class ShiftEdit extends React.Component { 
     constructor(props) { 
     super(props); 

     this.state = { 
      isReady: false, 
      shiftId: '', 
      startHour: '', 
      endHour: '', 
      color: '', 
     } 
     } 

     componentDidMount() { 
     InteractionManager.runAfterInteractions(() => { 
      this.setState({isReady: true}); 
     }); 
     } 

     onChangeItem = (label, val) => { 
     let data = {}; 
     data[label] = val; 
     this.setState(data); 
     } 

     renderPlaceholder() { 
     return (
      <View style={styles.container}> 
      <Text>Loading...</Text> 
      </View> 
     ) 
     } 

     render() { 
     if (!this.state.isReady) { 
      return this.renderPlaceholder(); 
     } 

     return (
      <View style={{flex:1, flexDirection: 'column'}}> 
      <TimePicker label={'Start hour'} value={this.state.startHour} onChange={this.onChangeItem.bind(this, 'startHour')} /> 
      <TimePicker label={'End hour'} value={this.state.endHour} onChange={this.onChangeItem.bind(this, 'endHour')} /> 
      <ColorPicker label={'Color'} value={this.state.color} onChange={this.onChangeItem.bind(this, 'color')} /> 
      <LabelPicker label={'Shift ID'} value={this.state.shiftId} onChange={this.onChangeItem.bind(this, 'shiftId')} /> 
      </View> 
     ) 
     } 
    }; 

Я пытался контролировать регистрацию анимации, как предложил Крис, но это все тот же:

onPress =() => { 
    let handle = InteractionManager.createInteractionHandle(); 
    this.props.navigator.push({component: 'shiftedit'}); 
    InteractionManager.clearInteractionHandle(handle); 
    } 

Answer 1

Вот дикая догадка, как у меня нет опыта работы с InteractionManager напрямую. Но после просмотра Interaction Manager Docs я заметил, что есть способ зарегистрировать анимацию. Итак, я предполагаю, что анимация Navigator не была должным образом зарегистрирована. Поэтому, возможно, попробуйте что-то вроде этого ...

var handle = InteractionManager.createInteractionHandle(); 
// run your navigator.push() here... (`runAfterInteractions` tasks are queued) 
// later, on animation completion: 
InteractionManager.clearInteractionHandle(handle); 
// queued tasks run if all handles were cleared 

Надеюсь, что это поможет!

Answer 2

На самом деле это единственное решение, которое работает для меня сейчас:

componentDidMount() { 
    // InteractionManager.runAfterInteractions(() => { 
    // this.setState({isReady: true}); 
    // }) 
    setTimeout(() => { 
     this.setState({isReady: true}); 
    }, 75); 
    } 

но я предпочел бы использовать InteractionManager ...