React Native - Vertical align image với resizeMode "chứa"

Question

Khi một ảnh có chế độ thay đổi kích thước "chứa" nó có vẻ phù hợp/biện minh cho ảnh thực ở trung tâm, nội dung hình ảnh được căn chỉnh/hợp lý khi khởi động flex.

<Image resizeMode="contain" ...> 
<Text>Title</Text> 
</Image> 

Sau đây tôi thấy văn bản xuất hiện phía trên hình ảnh.

Có cách nào để căn chỉnh theo chiều dọc hình ảnh chứa lên trên không?

Answer 1

Bạn cần sử dụng kiểu trên Hình ảnh của mình để đặt căn chỉnh theo chiều dọc bạn muốn.

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Image source={{uri: "http://placekitten.com/300/505"}} style={styles.image}> 
      <Text style={styles.instructions}> 
      Hello ! 
      </Text> 
     </Image> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'stretch', 
    backgroundColor: '#F5FCFF', 
    }, 
    image: { 
    height: 500, 
    justifyContent: "space-around", // <-- you can use "center", "flex-start", 
    resizeMode: "contain",    //  "flex-end" or "space-between" here 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: 'white', 
    backgroundColor: "transparent", 
    fontSize: 25, 
    }, 
}); 

Xem https://rnplay.org/apps/9D5H1Q cho một ví dụ chạy

Answer 2

tôi đã có thể để mô phỏng CSS backgroundPosition sử dụng đoạn mã sau:

<View style={{ overflow: 'hidden' }}> 
    <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} /> 
</View> 

Do tràn : 'ẩn' trên Xem chiều cao của hình ảnh có thể được điều chỉnh mà không nhìn thấy chiều cao thêm của hình ảnh. Bạn sẽ cần phải sử dụng 'cover' thay vì 'contains' cho chế độ thay đổi kích thước cũng như nếu không bạn sẽ kết thúc với một hình ảnh lấy nét không rộng bằng vùng chứa Xem nếu bạn đặt chiều cao của hình ảnh quá lớn .

Trong ví dụ hàng đầu bên dưới Chiều cao hình ảnh (đường chấm màu xanh) lớn hơn ví dụ dưới cùng và do đó đường trung tâm của hình ảnh nằm thấp hơn trong chế độ xem. Bằng cách giảm chiều cao của hình ảnh (đường chấm màu xanh) trong ví dụ thứ hai, đường trung tâm của hình ảnh sẽ di chuyển lên trong chế độ xem.

Hy vọng điều này có ý nghĩa và tôi hy vọng nó hoạt động cho trường hợp sử dụng của bạn; nó đã làm cho tôi: D

Answer 3

Tôi cần làm điều tương tự. Cách tốt nhất tôi tìm thấy để thực hiện điều này là để cung cấp cho chiều cao hoặc chiều rộng của hình ảnh một cách rõ ràng. Sau đó, bằng cách gói hình ảnh của bạn trong một thành phần khác, bạn có thể sử dụng justifyContent để có toàn quyền kiểm soát vị trí của hình ảnh.

Đúng là bạn không phải lúc nào cũng có chiều rộng hoặc chiều cao của hình ảnh. Tuy nhiên, khá thường xuyên (đặc biệt là sử dụng resizeMode: 'contains') bạn muốn thiết lập chiều cao hoặc chiều rộng tương đối so với cái gì đó. Tôi muốn chiều cao bằng với chiều rộng của chế độ xem. Đây là giải pháp mà tôi đã sử dụng:

<View style={{ flex: 1, justifyContent: 'flex-start' }}> 
    <Image 
     source={{ uri: imagePath }} 
     resizeMode="contain" 
     style={{ height: vw(100) }} 
    /> 
</View> 

Vw là chức năng trợ giúp đến từ câu trả lời this.

Answer 4

Bạn cần sửa một số giá trị mà giá trị khác cho phép mà không được đặt. trong hầu hết các trường hợp, hãy để chiều rộng cố định. Hãy cẩn thận với phụ huynh flex tùy chọn. Nó có thể thay đổi thiết kế của bạn.