React native React Native ListView-并非所有可见项都被呈现

作为第一个React原生项目，我只是尝试创建一个简单的动画。 这是一个列表视图，其中填充了用于设置不透明度动画的正方形。 为此，我创建了一个包含正方形的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'
        }
    });

class Square扩展组件{
建造师（道具）{
超级（道具）；
_默认转换=500；
此.state={
_rowOpacity：新的动画.Value（0），
目标容量：0
};
设置间隔（（）=>{
this.state.targetopacity=this.state.targetopacity==0？1:0；
this.animate（this.state.targetopacity）；
}，Math.random（）*1000）；
}
制作动画（到）{
动画。计时（
这个州，
{toValue:to，持续时间：500}
).start（）；
}
componentDidMount（）{
这个。动画（1）；
}
render（）{
var rand=Math.random（）；
var color=rand<0.3？“粉蓝”：rand>0.6？“天蓝”：“钢蓝”；
返回(
{this.props.children}
);
}
}
类首先扩展组件{
建造师（道具）{
超级（道具）；
var array=array.apply（null，{length:1000}）.map（Number.call，Number）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（数组）
};
}
render（）{
返回(
}
/>
);
}
}
var styles=StyleSheet.create({
名单：{
flexDirection:'行'，
flexWrap:“wrap”
}
});

结果是，尽管阵列有1000个单元，但只有11个正方形在屏幕上自行设置动画。 这意味着，将渲染一行半，屏幕的其余部分为空白

我想让整个屏幕充满动画方块

非常感谢你的帮助，

---

Giora。

好的，在尝试了一些东西并返回文档之后，我找到了：initialListSize道具，它允许设置渲染行的初始数量

<ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
      initialListSize={size}
          renderRow={(rowData) => <Square></Square>}
        />

}
/>

它成功了