根据里面的图像调整视图高度。反应本机

Question

如何确保图像完美适合容器。图像的宽度应始终为 100%，容器的高度应根据图像进行调整。容器有一个最大高度（如果图像高度大于容器，我稍后会处理这个问题，可能会在将图像作为输入时处理）。

我主要遗漏了一些非常基本的东西，但我不记得了。

import React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

export default function Post() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.postImage}
        source={{
          uri: "https://images.unsplash.com/photo-1666298888811-b7191e4d935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1914&q=80",
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    maxHeight: 400,
    borderWidth: 1,
  },
  postImage: {
    width: "100%",
    height: "100%",
    resizeMode: "contain",
  },
});

Answer 1

我希望它有帮助：https://snack.expo.dev/@saqib3019/juicy-milkshake

import { View, StyleSheet, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.postImage}
        source={require('./assets/snack-icon.png')}
      />
    </View>
  );
}
//=================================================
// you can change the width and height of the image directly
//=================================================
// const styles = StyleSheet.create({
//   container: {
//     borderWidth: 1,
//   },
//   postImage: {
//     width:100,
//     height:100,
//     resizeMode: "contain",
//     alignSelf:'center'
//   },
// });

//=================================================
// or you can change the width and height of the parent of the image and the image will adjust to that
//=================================================
const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    width:100,
    height:100,
  },
  postImage: {
    width:'100%',
    height:'100%',
    resizeMode: "contain",
    alignSelf:'center'
  },
});