Hình ảnh 'contains' resizeMode không hoạt động trong phản ứng gốc

Question

Tôi đang sử dụng React Native trên thiết bị Android thực. Khi tạo một ứng dụng thực sự đơn giản chỉ với những điều sau đây làm cho chức năng trên thành phần ứng dụng chính ...

render() { 
    <Image 
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}} 
    style={ 
     { 
     flex: 1, 
     resizeMode: 'contain', 
     backgroundColor: 'yellow' 
     }   
    } /> 
} 

tôi nhận được kết quả sau trên điện thoại của tôi:

Như bạn có thể nhìn thấy toàn bộ nền có màu vàng để cho chúng tôi biết yếu tố hình ảnh đang thực sự chiếm toàn bộ kích thước màn hình. Nhưng nó chỉ là sai lầm. Thay đổi kích thước 'cover'Mode hoạt động như mong đợi (và chế độ' kéo dài '). Chế độ 'chứa' không hoạt động (chế độ quan trọng nhất từ ​​quan điểm của tôi). Sự cố trở nên tồi tệ hơn khi đặt hình ảnh trên một ListView vì hình ảnh thậm chí không hiển thị.

CẬP NHẬT 1 Như Frederick chỉ ra, 'contains' chỉ hoạt động khi hình ảnh lớn hơn kích thước vùng chứa. Vậy làm thế nào chúng ta có thể làm cho hình ảnh có kích thước toàn bộ container trong khi vẫn giữ được tỷ lệ khung hình của nó? Phần trăm không được hỗ trợ theo kiểu trong Phản hồi và tôi không biết cách tải các thuộc tính chiều rộng và chiều cao của hình ảnh khi hình ảnh được tải. Không có sự kiện nào liên kết với thành phần Hình ảnh cung cấp thông tin đó.

CẬP NHẬT 2 Tin vui. Tôi hiện đang sử dụng React Native v0.24.1 và có vẻ như chế độ 'contains' của hình ảnh hiện hoạt động như mong đợi, ngay cả khi kích thước hình ảnh thực tế nhỏ hơn vùng chứa của nó. Giải pháp của zvona rất tốt (mặc dù bạn cần lưu ý rằng onLayout sẽ cung cấp cho bạn kích thước xem hình ảnh mà hình ảnh được hiển thị, nhưng KHÔNG được tải kích thước hình ảnh thực). Hiện tại, tôi không biết cách nào để tìm ra kích thước hình ảnh thực tế (giả sử bạn đang truy xuất hình ảnh từ tài nguyên mạng và bạn không biết kích thước, có thể rất quan trọng nếu bạn muốn tính toán tỷ lệ khung hình của nó).

Answer 1

"Chứa" chỉ thay đổi kích thước hình ảnh của bạn khi kích thước hình ảnh là lớn hơn so với vùng chứa bạn đang cố gắng khớp. Trong trường hợp này, vùng chứa của bạn là toàn màn hình. Hình ảnh bạn đang tải qua URL nhỏ hơn, vì nó chỉ có 53 x 77 pixel. Vì vậy, nó sẽ không thay đổi kích cỡ.

Tôi nghĩ rằng "bìa" nên làm những gì bạn đang cố gắng đạt được. Tuy nhiên, do kích thước hình ảnh, nó sẽ không trông rất đẹp khi nó được phóng đại như thế. Made một ví dụ ở đây: https://rnplay.org/apps/X5eMEw

Answer 2

câu trả lời của tôi để CẬP NHẬT một phần của câu hỏi:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} /> 

nơi:

onImageLayout: function(data){ 
    console.log('layout', data.nativeEvent.layout); 
} 

Những nên được cân đối với chiều rộng thiết bị + chiều cao, mà bạn nhận được với:

const { 
    Dimensions, 
    . 
    . 
    . 
} = React; 

const windowWidth = Dimensions.get('window').width; 
const windowHeight = Dimensions.get('window').height; 

Và nếu bạn muốn để có được chiều rộng/chiều cao như tỷ lệ phần trăm trong phong cách, bạn chỉ cần xác định ví dụ .:

const styles = StyleSheet.create({ 
    image: { 
    width: windowWidth * 0.75, 
    height: windowHeight * 0.33 
    }   
}); 

Answer 3

Đây là những gì làm việc cho tôi với các mới nhất phản ứng bản địa 0.37:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />