反應本機ListView - 並非所有可見的項目都呈現

作爲第一個React-Native項目，我只是試圖創建一個簡單的動畫。這是一個ListView，裏面填充了正方形，可以激活它們的不透明度。爲此我創建了一個包含Square的ListView，這是一個用3種顏色之一繪製的50X50正方形。反應本機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' 
     } 
    });

結果是隻有11個方格在屏幕上自己動畫，儘管數組有1000個單元格。這意味着，一行半被渲染，屏幕的其餘部分是空白的。

A screenshot of the issue

我想擁有一個充滿動畫廣場整個屏幕。

非常感謝幫助， Giora。

來源

2017-02-23 gioravered

好吧，在嘗試了一些事情並回到文檔後，我找到了：initialListSize prop允許設置渲染行的初始數量。

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

它工作。

來源

2017-02-24 05:46:38 gioravered

反應本機ListView - 並非所有可見的項目都呈現

回答

相關問題