reactjs - React native 背景图像警告 : Invalid props. 样式键 `resizeMode` 提供给 `View`

Question

从 this post 收集指导关于如何在 RN 中创建背景图像，我了解到我需要一个包含其他元素的图像:

 <Image style=... source=...>
     <Text>Hello</Text>
 </Image>

但是，我认为当图像具有内部元素时，RN 会将其转换为 View 。我得出这个结论是因为我收到了这个警告:

这是特殊的，因为 resizeMode 提供给图像而不是 View 。警告中描述的包含图像的样式:

{
      width: null,
      height: null,
      overflow: "hidden",
      flex: 1,
      flexDirection: "column",
      justifyContent: "space-between",
      alignItems: "stretch",
      resizeMode: "cover"
}

我应该忽略这个警告还是有正确的方法来创建这些类型的结构:

Answer 1

当原始图像尺寸与框架不匹配时，resizeMode prop 确定如何调整图像的大小。

对于您的用例，contain 应该添加为该 Prop 的值，并且 Prop 应该添加到图像顶部，而不是作为样式的一部分。

包含将

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

<Image style=... source=... resizeMode="contain">
    <Text>Hello</Text>
 </Image>