尝试在反应原生的自定义组件中使用两个道具，但它不起作用

Posted 2023-02-23

【中文标题】尝试在反应原生的自定义组件中使用两个道具，但它不起作用

【英文标题】：Trying to use two props in custom defined component in react native, but it doesn't work

【发布时间】：2021-01-18 18:11:05

【问题描述】：

我正在向我的自定义组件添加两个道具（textProp 和 imgProp），但我不断收到此错误 <Image> component cant contain children。这就是我到目前为止所拥有的

function TextImg(textprop, imgprop) 
  return(
    <div>
      <div>
        <Text>textprop.text</Text>
      </div>
      <div>
        <Image source=imgprop.imageUri>!</Image>
      </div>
    </div>
  );

谁能帮我解决这个问题，谢谢！

【参考方案1】：

图像 (img) 被视为空元素并且是自闭合的，并且 要求 符合 html 规范。

https://developer.mozilla.org/en-US/docs/Glossary/Empty_element

react native Image 有同样的限制。

它们不能包装任何东西或有任何子节点。这 ”！”是问题。

<Image source=imgprop.imageUri>!</Image>

试试吧

<Image source=imgprop.imageUri />

如果您需要显示“！”那么它必须在图像之外。

【讨论】：

哦，我不想要'！'在那里，这是一个错字。非常感谢您的帮助！

@Ishasharmax 太好了。如果答案解决了您的问题，请标记为已接受，以便其他人知道它已解决。干杯。

【参考方案2】：

如果您需要显示“！”在图像中，

试试

<View>
  <Image source=img />
  <Text
    style=
      position: "absolute",
      // some stylng
    
  >
    !
  </Text>
</View>