phản ứng gốc - Hình ảnh phù hợp có chứa Chế độ xem, không phải toàn bộ kích thước màn hình

Question

Tôi đang cố gắng vừa với hình ảnh trong các chế độ xem có chứa của chúng để tôi có thể có lưới hình ảnh liền mạch. Vấn đề là resizeMode='contain' dường như vừa với chiều rộng của màn hình hoặc ít nhất một số vùng chứa cấp cao hơn, tôi cần hình ảnh để vừa với kích thước của từng mục trong danh sách.

Dưới đây là một ví dụ rất xấu xí của phong cách và kết quả là lưới:

Các phong cách:

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'blue' 
    }, 

    item: { 
    flex: 1, 
    overflow: 'hidden', 
    alignItems: 'center', 
    backgroundColor: 'orange', 
    position: 'relative', 
    margin: 10 
    }, 

    image: { 
    flex: 1 
    } 
}) 

Cách bố trí:

<TouchableOpacity 
    activeOpacity={ 0.75 } 
    style={ styles.item } 
> 
    <Image 
    style={ styles.image } 
    resizeMode='contain' 
    source={ temp } 
    /> 
</TouchableOpacity> 

Kết quả (với resizeMode='contain'):

Kết quả (với resizeMode='cover'):

Như bạn thấy, những hình ảnh cover ed rất lớn và rộng như toàn bộ màn hình và không phù hợp với quan điểm chứa ngay lập tức.

Cập nhật 1:

tôi đã có thể đạt được một kết quả gần với những gì tôi đang tìm kiếm bằng cách áp dụng một quy mô biến đổi đến hình ảnh và thu hẹp nó từ trung tâm:

Các transform:

transform: [{ scale: 0.55 }] 

Cách bố trí kết quả (không có lợi nhuận hoặc miếng đệm):

Answer 1

Tôi không thể lấy ví dụ làm việc bằng cách sử dụng các thuộc tính resizeMode của Image, nhưng vì tất cả hình ảnh sẽ là hình vuông nên có cách để làm điều đó bằng cách sử dụng Kích thước của cửa sổ cùng với flexbox.

Đặt flexDirection: 'row' và flexWrap: 'wrap', sau đó tất cả sẽ xếp hàng miễn là chúng có cùng kích thước.

tôi đặt nó lên here

https://snack.expo.io/HkbZNqjeZ

"use strict"; 

var React = require("react-native"); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TouchableOpacity, 
    Dimensions, 
    ScrollView 
} = React; 

var deviceWidth = Dimensions.get("window").width; 
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg"; 
var SampleApp = React.createClass({ 
    render: function() { 
    var images = []; 

    for (var i = 0; i < 10; i++) { 
     images.push(
     <TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}> 
      <Image style={styles.image} source={{ uri: temp }} /> 
     </TouchableOpacity> 
    ); 
    } 

    return (
     <ScrollView style={{ flex: 1 }}> 
     <View style={styles.container}> 
      {images} 
     </View> 
     </ScrollView> 
    ); 
    } 
}); 

Answer 2

Tôi nghĩ rằng đó là vì bạn chưa định chiều rộng và chiều cao cho item.

Nếu bạn chỉ muốn có 2 hình ảnh liên tiếp, bạn có thể thử một cái gì đó như thế này thay vì sử dụng flex:

item: { 
width: '50%', 
height: '100%', 
overflow: 'hidden', 
alignItems: 'center', 
backgroundColor: 'orange', 
position: 'relative', 
margin: 10, 
}, 

này làm việc cho tôi, hy vọng nó sẽ giúp.

Answer 3

Thiết lập kích thước cho Xem và chắc chắn rằng bạn ảnh theo kiểu với chiều cao và chiều rộng thiết lập để 'undefined' như ví dụ dưới đây:

<View style={{width: 10, height:10 }} > 
     <Image style= {{flex:1 , width: undefined, height: undefined}}  
     source={require('../yourfolder/yourimage'} 
     /> 
    </View> 

này sẽ đảm bảo hình ảnh của bạn quy mô và phù hợp hoàn hảo với quan điểm của bạn.