アニメーション中にネイティブAndroidラグに反応します

Question

NavigatorがシーンShiftEditの下に移動すると、トランジションアニメーション中に遅れが発生します。アニメーションはすぐに開始されますが、1ミリ秒間停止します。 InteractionManagerは、4つのピッカーコンポーネントのレンダリングを延期するために使用されます。すべてのピッカーコンポーネントには、配列から構築された項目のリストがあります。多くのアイテムがあります。ピッカーコンポーネントが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> 
     ) 
     } 
    }; 

私はそれはまだ同じクリスが示唆したように、アニメーションの登録をコントロールしようとしましたが、私が直接InteractionManagerとは経験をしたんよう

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

Answer 1

はここで野生の推測です。しかし、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

は実はこれが今私の作品唯一のソリューションです。...その代わりShiftEditでInteractionManagerを使用しての