为什么当我应用宽度属性时我的图像消失了？

Question

我正在尝试创建一个具有本机反应的应用程序，

这是atm代码：

import { View, Text, Image } from 'react-native'
import React from 'react'

export default function Login() {
  return (
    <View>
        <Image source={require('./../assets/images/login.jpg')}
            style={{
              width: '100%',      
            }}
        />
    </View>
  )
}

问题是当我应用宽度属性时，因为我的图像就消失了。 如果我不使用该属性，一切都很好，我可以使用高度并且它可以正常工作，但是一旦我使用宽度，我就会看到一个白色的屏幕。我尝试了不同的图像，不同的百分比，但结果相同。

PS：只有当我使用 % 时才会出现此错误，如果我使用 px 则有效。

你能向我解释一下为什么会发生这种情况吗？

谢谢你。

我希望图像覆盖背景的整个宽度。

Answer 1

如果您希望图像覆盖背景的整个宽度，您可以使用

flex

容器作为背景视图，并将图像宽度设置为 100% 以占据整个容器 - 试试这个：

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

export default function Login() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image 
        source={require('./../assets/images/login.jpg')}
        style={{ width: '100%', height: undefined, aspectRatio: 1 }}
      />
    </View>
  );
}

使用时必须在视图中定义

%

但 px 你不需要定义，因为它是在打字稿系统中设置的