寫在前面：

近期使用使用ReactNative開發時遇到一個瀑布流場景需求，遇到一些意想之外的坑，所以本篇文章我主要從如何避坑、如何實現來講解？目標：實現瀑布流佈局如下圖：

autoresponsive-react-native簡介：

上面文件中你可看到大致用法，不過我們的今天的主題並不是如何使用這個框架，而是這個框架能不能跟ReactNative 中的ListView 一起使用？因為，如果這兩個框架如果能放在一起使用簡直是集優秀效能於一身，那豈不是美哉！！！
既然目標有了，那就一起看看程式碼實現效果：

程式碼示例1：

下面是部分主要程式碼，

<AutoResponisve
 
 {...this.getAutoResponsiveProps()}>
    <ListView
        dataSource={this.state.dataSource.cloneWithRows(feedList.slice(0))} //資料來源
        contentContainerStyle={{justifyContent:'space-around',flexDirection: 'row',flexWrap: 'wrap',paddingTop:10,paddingHorizontal:5}}
        renderRow={this.renderChildren}
 
 //列表模板
        initialListSize={2}//指定在元件剛掛載的時候渲染多少行資料。用這個屬性來確保首屏顯示合適數量的資料，而不是花費太多幀逐步顯示出來
        onEndReached={this._onEndReach}
        onEndReachedThreshold={30} //呼叫onEndReached之前的臨界值，單位是畫素
        renderFooter={this._renderFooter}//腳會在每次渲染過程中都重新渲染
        refreshControl={
            <RefreshControl
 

                refreshing={isRefreshing}
                onRefresh={this._onRefresh}
                colors={['rgb(217, 51, 58)']}
            />
        }
    />
</AutoResponisve>

解釋：autoresponsive-react-native 框架的用法需要把重複出現的列表內容用<AutoResponisve {...this.getAutoResponsiveProps()}> </AutoResponisve>包裹，因此你看到了上面程式碼ListView被它所包裹，用法沒毛病，看一下執行效果：

結果報了錯，大致是說子模組的寬度沒法評估，，，。仔細想想，上面的方式有問題，首先ListView就一個啊，List又不是有多個，出現多個的只是ListView 中的item而已，所以我們繼續修改程式碼，如下：

程式碼示例2：

<AutoResponisve {...this.getAutoResponsiveProps()}>
   <ListViewItem />
</AutoResponisve>

上面程式碼是ListView中renderRow={this.renderChildren} 的renderChildren 元件中的程式碼，示例程式碼1中的第5行
執行效果如下，都堆在一起了，，，無奈（item佈局是我隨便排的，我們要的效果還是像測試圖中的item排列方式，請忽略item中的樣式排版）

原因分析：弄到這裡還沒實現效果，我必須帶大家去看一下官網中給的例子了：

class SimplestSampleComponent extends React.Component {

  ...

  render() {
    return (
      <div>
        <div className="btn-group">
          {this.renderButtons()}
        </div>
        <AutoResponsive ref="container" {...this.getAutoResponsiveProps()}>
          {this.renderItems()}
        </AutoResponsive>
      </div>
    );
  }
}

注意第11-13行，我上面說過，需要使用特定標籤將列表所有item包裹，作為父級元素。講到這，我們恍然大悟，item的父級只有ListView 本身，你無法像官網中例子那樣講item包裹在AutoResponsive標籤內部啊，因為ListView有自己內部的map迴圈，示例程式碼2犯的錯誤是：將單個item包裹在AutoResponsive標籤中，這本身就違反了用法。這裡你可能會問了，到底能不能使用AutoResponsive+ListView 實現瀑布流？結果很明顯，現在還不能！
其他原因：listView本身最擅長的就是垂直列表，或者說螢幕的每一橫排的一個或幾個item的高度相同的垂直佈局（參考下圖，每橫排的高度不同），

上圖中的ListView樣式還需新增flexDirection: 'row',flexWrap: 'wrap',否則是沒有左右佈局
重點：AutoResponsive包裹的內容還不能使用flexDirection: 'row',flexWrap: 'wrap'否則頁面排版出現混亂，可以下去嘗試一番。

下面是FlatList(ListView優化版)目前最新版本0.56中的說明：暫時還無法支援瀑布流。

解決方案：

使用ScrollView + AutoResponsive

<ScrollView
     contentContainerStyle={{paddingTop: 10}}
     ref={scrollView => this.scrollView = scrollView}
     style={{width: gScreen.width, height: scrollViewH}}
     automaticallyAdjustContentInsets={false}
     removeClippedSubviews
     bounces
     scrollEventThrottle={16}
     onMomentumScrollEnd={this.onMomentumScrollEnd}
     refreshControl={
         <RefreshControl
             refreshing={isFetching}
             onRefresh={this.onRefresh}
             colors={['rgb(217, 51, 58)']}
         />
     }
 >
    <AutoResponisve {...this.getAutoResponsiveProps()}>
        {feedArray.map(this.renderChildren)}//載入所有列表item
    </AutoResponisve>

 </ScrollView>

總結：

1.AutoResponsive包裹的內容還不能使用flexDirection: 'row',flexWrap: 'wrap'否則頁面排版出現混亂。
2.AutoResponisve包裹的元件，元件中的樣式不能使用StyleSheet.create創建出來的樣式，和使用行內樣式或者下面寫法。

const style = {
     width:(ScreenWidth-40) / 2,
     backgroundColor:'red',
     marginLeft: 15
}

例如：

<View style={[style,{height:rheight,alignItems:'center',justifyContent:'center'}]}>
   <Text style={{fontSize:20}}>{item.name}</Text>
</View>

3.使用ScrollView作列表渲染時，一定要做好分頁，目的是提高新能。（ScrollView機制是將所有item一次性全部渲染出來，對效能消耗過大）。

為了能及時的將自己踩到的前端坑（包括ionic,angular,ReactNative,小程式,APICloud）分享給大家，以後會逐漸將文章轉移到微信公眾號：前端e家（front_e_family）。可直接掃碼關注，公眾號會不定期更新新文章，分享踩坑筆記！期待您的關注！