在动画过程中反应本机Android滞后
问题描述:
当导航器进入场景ShiftEdit时,我在转换动画期间遇到滞后现象。动画立即开始,但停止一毫秒。 InteractionManager用于推迟渲染四个选取器组件。每个选择器组件都有一个从数组构建的项目列表。有很多项目。即使选择器组件在ShiftEdit中尚未渲染,这是否有可能计算出来,这是滞后的原因?请问你能帮帮我吗?在动画过程中反应本机Android滞后
'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);
}
答
这是一个疯狂的猜测,因为我已经与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
希望帮助!
答
其实这是我现在工作的唯一解决方案:
componentDidMount() {
// InteractionManager.runAfterInteractions(() => {
// this.setState({isReady: true});
// })
setTimeout(() => {
this.setState({isReady: true});
}, 75);
}
,但我宁愿使用interactionManager,可...
而是在ShiftEdit使用interactionManager,可的,你可以尝试使用InteractionManager.runAfterInteractions在每个选取器组件的componentDidMount中?让我知道如果这有帮助! – narayanan
嗨,我已经检查过它,但它的工作原理是相同的,我使用RN 0.22也许是这种情况。 –