如何在本机中为不同高度的图像设置样式

时间:2019-04-18 12:06:19

标签: reactjs react-native react-redux

我想为不同高度的图像设置样式。这些图像存储在数组中。我已经使用平面列表来显示图像。

<FlatList 
    data={this.props.category}
    renderItem={({item}) =>{
        Image.getSize(item.imagepath, (srcWidth, srcHeight)=>{
        const maxHeight = Dimensions.get('window').height;
        const maxWidth = Dimensions.get('window').width;
        const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        this.setState({width:srcWidth*ratio, height:srcHeight*ratio})
        })  
        return(
           <View>
           { this.state.width && this.state.height ?( 
               <Card style={styles.fullCard}>
               <Image 
                   source={{uri:item.imagepath}} 
                   style={{width:this.state.width, height:this.state.height}} 
                 />
                </Card>):(null)
            }
            </View>
            )
        }
    }
/>

我想要这些图像根据其长度。它应该自动调整自己。

1 个答案:

答案 0 :(得分:0)

使用react-native-auto-height-image插件对我有用。它本身占据了整个高度。它创建的唯一问题是宽度。

var supplier_names = _context.Products.Where(condition)
                             .SelectMany(u => u.Suppliers).Select(a => a.Name).ToList(); 

我使用设备的尺寸解决了宽度问题。