在动画过程中反应本机Android滞后

Question

当导航器进入场景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后，我注意到有一种注册动画的方法。所以，我的猜测是导航器的动画没有正确注册。所以也许尝试这样的事情...

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，可...