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>
        )
      }
    };

我试图像Chris建议的那样控制动画注册，但它仍然是相同的：

  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

实际上这是唯一对我有用的解决方案：

var Test = function() {
  var self = this;
  var innerPrivate = 1;
  self.innerPublic = 1;
  self.innerShow = function() {
    console.log(innerPrivate++ + ':' + this.innerPublic++);
  };
  this.constructor.prototype.protoShow = function() {
    console.log(innerPrivate++ + ':' + this.innerPublic++);
  };
};

var t1 = new Test();
var t2 = new Test();

t2.innerShow(); //1:1
t1.innerShow(); //1:1
t2.innerShow(); //2:2
t1.innerShow(); //2:2

t2.protoShow(); //3:3 (expected: 1:3 or 3:3)
t1.protoShow(); //4:3 (expected: 2:3 or 3:3)
t2.protoShow(); //5:4 (expected: 3:4 or 4:4)
t1.protoShow(); //6:4 (expected: 4:4)

但我更愿意使用InteractionManager ...

Answer 3

此外，请记住，如果在测试应用程序时运行 React Native Debugger ，React Native动画在Android上会出现抖动。

这是我的经验。

https://github.com/jhen0409/react-native-debugger

在动画期间反应原生Android延迟

3 个答案: