React 네이티브 ListView - 모든 보이는 아이템이 렌더되지 않습니다.

Question

첫 번째 React-Native 프로젝트로서 저는 단순한 애니메이션을 만들려고합니다. 불투명도에 애니메이션을 적용하는 사각형으로 채워진 ListView입니다. 3 색 중 하나가 그린 50X50 사각형 인 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 개의 사각형 만 화면에 나타납니다. 이것은 한 줄짜리 라인이 렌더링되고 나머지 화면은 비어 있음을 의미합니다.

나는 애니메이션 사각형 가득 전체 화면을 가지고 싶습니다.

도움을 주셔서 감사합니다. Giora.

Answer 1

몇 가지 시도를하고 문서로 돌아가서, 렌더링 된 행의 초기 개수를 설정할 수있는 initialListSize prop를 찾았습니다.

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

그리고 효과가있었습니다.