React Native之瀑布流

今天在讲解一下关于原生的瀑布流的实现方式，那么进入主题。有一种方式是自己写一个瀑布流的布局。但是在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 })
            }
          }, () => {

          })
        })

其中的o[2]是图片的连接地址，numberwidth和numberheight是我们知道的宽度和高度。所以我们可以存储起来~~是不~~~这个时候我们可以在render之前先进行网络调用。而且我们也不必当心一个问题就是图片图还没下载下来，但是已经render了呢。。实际上我们在下载完之后会再一次进行render一次。所以这个问题根本没有必要纠结。

下面我们来使用上面說的那个库：

   <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>

首先把AutoResponisve 这个东西进行let AutoResponisve = require('autoresponsive-react-native');获取到。然后布局如上面剩下的就是图片的放大和缩小而已。这个时候我们获取到的就是我们需要的瀑布流了。这个方式也适合ios。但是我们有一个问题就是图片这些的回收怎么办？因为项目比较赶我是这样处理的，写一个Listview，就使用第一行，把我们的瀑布流包裹进去。实际上面的对安卓手机进行测试过。没有什么太大的性能问题。