[React Native]瀑布流AutoResponsive

原创

james_karon 2022-08-05 08:34:05 博主文章分类：React Native ©著作权

©著作权归作者所有：来自51CTO博客作者james_karon的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.安装:

npm i autoresponsive-react --save

2.使用:

官方示例:github:https://github.com/xudafeng/autoresponsive_react_native_sample

引用:

let AutoResponsive = require("autoresponsive-react-native");

主体:

render() {
    return (
      <ScrollView style={styles.container}>
        <AutoResponsive {...this.getAutoResponsiveProps()}>
          {this.renderChildren()}
        </AutoResponsive>
      </ScrollView>
    );
  }

方法:

getAutoResponsiveProps() {
    return {
      itemMargin: 0
    };
  }

renderChildren() {
    return this.state.array.map((i, key) => {
      return (
        <View style={this.getChildrenStyle(i)} key={key}>
          <TouchableOpacity
            onPress={() =>{}}
          >
            <Image
              style={this.getChildrenStyle(i)}
              source={i}
            />
          </TouchableOpacity>
        </View>
      );
    }, this);
  }

这个方法显示item内容,下面详细分析.

3.显示图片:

数据源:

const image_1 = require("../../img/lookbook_images/1.png");
const image_2 = require("../../img/lookbook_images/2.png");
const image_3 = require("../../img/lookbook_images/3.png");
const image_4 = require("../../img/lookbook_images/4.png");
const image_5 = require("../../img/lookbook_images/5.png");
const image_kc1 = require("../../img/lookbook_images/kc1.png");
const image_kc2 = require("../../img/lookbook_images/kc2.png");
const image_kc3 = require("../../img/lookbook_images/kc3.png");
const image_kc4 = require("../../img/lookbook_images/kc4.png");
const image_kc5 = require("../../img/lookbook_images/kc5.png");

state = {
    array: [
   image_1,image_3,image_2,image_4,image_5,image_kc1,image_kc2,image_kc3,image_kc4,image_kc5]
    };

在renderChildren()里面遍历出来.

getChildrenStyle(i) {
    let imageWidth = resolveAssetSource(i).width;
    let imageHeight = resolveAssetSource(i).height;

    return {
      width: SCREEN_WIDTH / 2,
      height: (imageHeight / imageWidth) * (SCREEN_WIDTH / 2),
    };
  }