今天在講解一下關於原生的瀑布流的實現方式，那麼進入主題。有一種方式是自己寫一個瀑布流的佈局。但是在React Native裡面如果沒有進行自定義高度是完全沒有辦法去實現圖片這些的出現。但是我在原生的安卓裡面不需要圖片高度就可以進行設定。但是遇到一個很尷尬的問題是，專案很趕，而且沒有IOS的開發人員。所以這個時候暫時放棄了關於原生的呼叫。就自己寫一個。其實也不算自己寫的。因為在網上發現一個還不錯的庫：autoresponsive-react-native ，這個庫使用方式我也會貼出來。我也會說明怎麼使用的~

首先我們得獲取圖片的高度這些是不是呢。所以看以下程式碼：

      this.state.message.map((o, i) => {
          var Task = Image.getSize(o[2], (numberwidth, numberheight) => {
            var bili = numberheight / numberwidth;

            array.push(bili)
            arrayWidth.push(o[2])

            if (i == this.state.message.length - 1) {

              this.setState({ dataSourcetwo: ds.cloneWithRows([1]), isV: true })
            }
          }, () => {

          })
        })
 

下面我們來使用上面說的那個庫：

   <AutoResponisve itemMargin={_getWidth(15)} >
        {
          arrayWidth.map((i, key) => {
            return (
              <TouchableOpacity key={key} style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2 }} onPress={() => {

              }}>
                <View style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2, }}>
                  <Image source={{ uri: i }} style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2, resizeMode: 'cover' }} />
                  <View style={{
                    height: _getHeight(33),
                    width: (width - _getWidth(45)) / 2,
                    backgroundColor: 'white',
                    position: 'absolute',
                    bottom: 0,
                    flexDirection: 'row',
                    justifyContent: 'center'
                    , borderColor: _backgroundColor,
                    borderWidth: 0.5
                  }}>
                    <Text style={stylesCode.ListItemTextstyle}>hahahaha</Text>
                  </View>
                </View>
              </TouchableOpacity>
            );
          }, this)
        }
      </AutoResponisve>