ReactネイティブListView - すべての表示アイテムがレンダリングされない

Question

最初のReact-Nativeプロジェクトとして、単純なアニメーションを作成しようとしています。 不透明度をアニメーション化している正方形で埋められたListViewです。 私は3つの色のいずれかで塗装された50×50の正方形であるSquareを含むListViewを作成しました。

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

その結果、アレイに1000個のセルがあるにもかかわらず、画面上には11個の四角形しかアニメーション化されません。 これは、1行半が表示され、残りの画面は空白であることを意味します。

私はアニメーションの正方形で満たされ、画面全体を持っていると思います。

助けてくれてありがとうございました ジオラ。

Answer 1

私はいくつかのことを試して、ドキュメントに戻ってから、initialListSize propを見つけました。これにより、レンダリングされた行の初期数を設定できます。

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