React Native 图像占据了所有可用的垂直空间

Question

我是react-native的新手（2天前开始），但我很快就学会了，因为我已经知道常规的react。我正在尝试编写一个现实世界的应用程序，但我不知道如何正确放置图像，我希望我的图像标签占据屏幕上的所有水平空间，但我也希望它保留在最顶部屏幕并保持其纵横比（我无法对其进行硬编码，因为我还将显示车牌的其他图片，包括不像北美那样的欧洲车牌图片），同时不占用实际图像所有可用的垂直空间。

这是我的代码渲染内容和我实际想要的内容的 GIMP 编辑： https://ibb.co/XJgrhkC

这是我的渲染函数：

export default class App extends Component {
  ...

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
        <Image
          source={require(`./resources/images/north_america/original/alaska.jpg`)}
          style={{ flex: 1, width: screenWidth }}
          resizeMode="contain" />
        <Button title="Random state" onPress={this.getRandomState} />
      </View>
    );
  }
}

我熟悉CSS的布局选项，但react-native似乎有所不同，我无法理解宽度、flex和resizeModes的所有组合。

Answer 1

通常，将

flex

应用于包含

<View />

和

<Image />

的

<Button />

标签后，父组件的子组件将应用相同的

flex

属性。因此，您可以删除

flex

下的

<Image />

道具。

在 React-Native 中处理

<Image />

一段时间后，我必须说，为

height

和

width

指定值对于

<Image />

的正确显示非常重要。

您可以在我的世博会示例中尝试一下这里。

  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center'
      }}>
        <Image
          source={require(`./resources/images/north_america/original/alaska.jpg`)}
          style={{
            width: screenWidth,
            height: 200,
          }}
          resizeMode="contain"
        />
        <Button
          title="Random state"
          onPress={this.getRandomState}
        />
      </View>
    );
  }

另外，由于您是 React-Native 新手，我可以建议您将

<Button />

更改为

<TouchableOpacity />

吗？当用户在移动设备上按下它时，它会提供视觉帮助。

Answer 2

当你使用flex时，添加{borderWidth: 2, borderColor: 'red'}就可以看到图片自动占据了很大的空间。相反，您必须手动指定高度。如果你想让它正确缩放，你可以试试这个：

import React from "react";
import { View, Image, Button, Dimensions } from "react-native";

class App extends React.Component {
  state = {
    imgWidth: 0,
    imgHeight: 0
  };

  componentDidMount() {
    Image.getSize("https://i.ibb.co/HgsfWpH/sc128.jpg", (width, height) => {
      // Calculate image width and height
      const screenWidth = Dimensions.get("window").width;
      const scaleFactor = width / screenWidth;
      const imageHeight = height / scaleFactor;
      this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
    });
  }
  render() {
    return (
      <View
        style={{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}
      >
        <Image
          style={{
            flex: 1,
            width: Dimensions.get("window").width,
            borderColor: "red",
            borderWidth: 2
          }}
          source={{
            uri: "https://i.ibb.co/HgsfWpH/sc128.jpg"
          }}
          resizeMode="contain"
        />
        <Button title="Random state" onPress={this.getRandomState} />
      </View>
    );
  }
}

export default App;

Answer 3

补充答案：

const Component = ({source = {} as any}) => {
    const [imgSize, setImgSize] = useState({ width: 0, height: 0 })
    useEffect(() => {
        const img = Image.resolveAssetSource(source)
        const screenWidth = Dimensions.get("window").width;
        const scaleFactor = img.width / screenWidth;
        const imageHeight = img.height / scaleFactor;
        setImgSize({ width: screenWidth, height: imageHeight});
    }, [source])
    return <View style={{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}>
        <Image style={{
                flex: 1,
                width: imgSize.width,
                height: imgSize.height
            }} resizeMode="contain" source={source} />
    </View>
}

无论源图像（uri、b64 等）如何，这都可以工作，并且会考虑尺寸。 要使图像变小，只需将宽度和高度乘以百分比（例如：宽度/0.7 将使图像图像变为原始尺寸的 70%）