作为第一个React-Native项目,我只想创建一个简单的动画。 它是一个ListView,里面装满了不同颜色的正方形。 为此,我创建了一个包含Square的ListView,它是一个50X50的正方形,涂有3种颜色之一。
class Square extends Component {
constructor(props) {
super(props);
_defaultTransition = 500;
this.state = {
_rowOpacity : new Animated.Value(0),
targetOpacity: 0
};
setInterval(() => {
this.state.targetOpcacity = this.state.targetOpcacity == 0 ? 1 : 0;
this.animate(this.state.targetOpcacity);
}, Math.random() * 1000);
}
animate(to) {
Animated.timing(
this.state._rowOpacity,
{toValue: to, duration : 500}
).start();
}
componentDidMount() {
this.animate(1);
}
render() {
var rand = Math.random();
var color = rand < 0.3 ? 'powderblue' : rand > 0.6 ? 'skyblue' : 'steelblue';
return (
<Animated.View
style={{height:50, width: 50, backgroundColor: color, opacity: this.state._rowOpacity}}>
{this.props.children}
</Animated.View>
);
}
}
class ReactFirst extends Component {
constructor(props) {
super(props);
var array = Array.apply(null, {length: 1000}).map(Number.call, Number);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(array)
};
}
render() {
return (
<ListView contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Square></Square>}
/>
);
}
}
var styles = StyleSheet.create({
list: {
flexDirection: 'row',
flexWrap: 'wrap'
}
});
结果是,只有11个正方形在屏幕上动画,尽管阵列有1000个单元格。 这意味着,渲染了一条半线,屏幕的其余部分为空白。
我希望整个屏幕充满动画方块。
非常感谢你的帮助, Giora。
答案 0 :(得分:0)
好的,在尝试了一些事情并回到文档之后,我发现了: initialListSize 道具,它允许设置渲染行的初始数量。
<ListView contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
initialListSize={size}
renderRow={(rowData) => <Square></Square>}
/>
它有效。