我正在寻找一种可以逐项制作动画平面清单的方法。当一个项目完成动画时,下一个项目(来自平面列表)将显示在屏幕上
class AnimatedFlatList extends React.PureComponent {
state = {selected: (new Map(): Map<string, boolean>)};
let data = {[
{"first_name":"ltorrejon0@si.edu"},
{"first_name":"ichadbourne1@icq.com"},
{"first_name":"ascorthorne2@mediafire.com"},
{"first_name":"jlathwood3@xing.com"},
{"first_name":"molkowicz4@ftc.gov"},
{"first_name":"motridge5@tiny.cc"},
{"first_name":"rcess6@hostgator.com"},
{"first_name":"mmaundrell7@php.net"},
{"first_name":"ufairburne8@instagram.com"},
{"first_name":"pangel9@biglobe.ne.jp"}]
};
_keyExtractor = (item, index) => item.id;
_onPressItem = (id: string) => {
// updater functions are preferred for transactional updates
this.setState((state) => {
// copy the map rather than modifying state.
const selected = new Map(state.selected);
selected.set(id, !selected.get(id)); // toggle
return {selected};
});
};
_renderItem = (item) => (
<View style={Styles.viewItem}}>
<Text style={Styles.textItem>{item.text}</Text>
</View>
);
render() {
return (
<FlatList
data={data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}
}
当我将animatedView
放入renderItem
时,它会一起运行,而不是我想要的。
种类this way(但无需按按钮,它将自动加载)
答案 0 :(得分:6)
也许有更好的解决方案,但是我正在使用delay
的{{1}}属性,它对我来说很好。
我的项目组件如下:
Animated.timing()
这是单位列表:
export default class CustomItem extends Component {
constructor(props) {
super(props);
this.state = {
scaleValue: new Animated.Value(0)
}
}
componentDidMount() {
Animated.timing(this.state.scaleValue, {
toValue: 1,
duration : 600,
delay: this.props.index * 350
}).start();
}
render() {
return (
<Animated.View style={{ opacity: this.state.scaleValue }}>
{ this.props.children }
</Animated.View>
);
}
}
因此,每一项都比之前的项目多延迟 350 毫秒。
当然,您可以更改动画的...
renderItem(item) {
return (
<CustomItem index={ item.index } >
<Text>{ item.first_name }</Text>
</CustomItem>
);
}
render() {
return (
<FlatList
keyExtractor={this._keyExtractor}
data={data }
renderItem={ this.renderItem.bind(this) }
/>
);
}
和duration
属性,然后为您找到最合适的动画:)
您需要注意项目的数量,因为您可能要等待太多时间才能看到最后一个项目:)
答案 1 :(得分:1)
结帐Animated.Stagger。并行运行动画,但具有连续指定的延迟。