响应本机条件渲染ImageBackground图片

Question

如果我的道具不为空，我正在尝试设置我的形象。如果我的道具不是空的，我需要显示来自网页链接的图像。如果支柱是空的，那么我需要显示来自本地文件的图像。到目前为止，我所做的都不起作用。

<ImageBackground
        source={{
            item.padStyle.icon !== null ? uri: 'https://example.com/image.png' : require('../../../assets/images/Hello.png'),
        }}
        style={styles.padImage}>
        <Text
          style={[
            styles.textBtnStyle,
            {
              color:
                item.padStyle.textColor !== null
                  ? item.padStyle.textColor
                  : colors.text,
            },
          ]}>
          {item.title}
        </Text>
      </ImageBackground>

Answer 1

请试试这边，

    <ImageBackground
              style={{height: 100, width: 100}}
              source={
                item.padStyle.icon !== null 
                  ? {uri: 'https://picsum.photos/200/300'}
                  : require('../../../assets/images/noImage.jpg')}>
</ImageBackground>

Answer 2

你能试试这个解决方案吗？

​

const imgSrc=item.padStyle.icon ? {uri:'https://example.com/image.png'} : require('../../../assets/images/Hello.png');

return(
<ImageBackground
        source={imgSrc}
        style={styles.padImage}>
        <Text
          style={[
            styles.textBtnStyle,
            {
              color:
                item.padStyle.textColor !== null
                  ? item.padStyle.textColor
                  : colors.text,
            },
          ]}>
          {item.title}
        </Text>
      </ImageBackground>
);

​