[React Native]瀑布流AutoResponsive

[React Native]瀑布流AutoResponsive

1.安装:

npm i autoresponsive-react --save

2.使用:

官方示例:github:AutoResponsive = require("autoresponsive-react-native");

主体:

render() { return ( {this.renderChildren()} ); }

方法:

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

renderChildren() { return this.state.array.map((i, key) => { return ( {}} > ); }, 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), }; }

然后这个方法控制item的style,必须要给予View宽高,否则AutoResponsive会计算不了宽高而报错.

但是只是给View宽高是不够的,因为如果图片尺寸太大,会显示不全.这时候只要View和Image统一一个尺寸就可以了.(高度通过等比计算缩小)

这是显示效果:

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。