如果 item.image 为 null (React Native)，则使用占位符图像

Question

我正在使用 FlatList 在屏幕上渲染多个图像。我想在 item.img 为 null 时渲染占位符图像（项目是从 react-redux 中获取的）。

问题：

我想通过 'require' 使用占位符图像。它使用单个大括号。 <Image source={ require('../assets/images/robot-prod.png') } style={styles.palceholderImage}/>。普通图像渲染使用两个花括号 {{uri: item.img}}.
我应该内联 if(item.img) 运算符吗？

这里是 _renderItem 函数。

 _renderItem = ({item}) => {
    let imgUrl = item.img;

    return (
      <TouchableWithoutFeedback
        onPress={() => this._handleCategoryPress(item.id)}>
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
      </TouchableWithoutFeedback>
    );
  }

这是API响应

[
    {
        "id": 1,
        "name": "Gym",
        "image": "www.aws.blahblahblah"
    },
    {
        "id": 2,
        "name": "School",
        "image": null
    },
    {
        "id": 3,
        "name": "hollymo",
        "image": "www.aws.blahblahblah"
    },

谢谢

Answer 1

试试这个

       item.image &&      
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />

       !item.image &&      
        <Image
          key={item.id}
          source={require('../assets/images/robot-prod.png')}
          style={styles.palceholderImage}
          resizeMode="cover"
        />

Answer 2

您正在寻找完整的 React 组件。基于已完成的 API 调用控制渲染的一种简单方法是将其用作承诺并 .then 使用 this.setState 如果您精通承诺：

apiPromise = () => new Promise((resolve, reject)=> {
  apiData = myApiCall()
  resolve(apiData)
}

class StuffToRender extends Component {
constructor(props) {
  super(props)
  this.state = {
    loaded: false
  }
}
componentWillMount() {
  apiPromise().then (() => {
    this.setState({loaded: true})
  })
}

render() {
  return (
    <div>
      {this.state.loaded ? myContent : myContentWhileLoading}
    </div>
  )
}
}

此外，作为旁注，您从其他用户的解决方案中收到的错误与 API/loading 逻辑无关。这是您尝试 return 超过 1 个 html 或组件元素的事实：

render() {
  return (
    <div>
      stuff
    </div>
    <div>
      stuff2
    </div>
  ) //two sets of div elements expose
}

您在这里渲染了 2 套物品。这就是 'multiple children' 的意思。但这是一个简单的修复。只需将物品包装在一个更大的容器中。

render() {
  return (
    <div>
      <div>
        stuff
      </div>
      <div>
        stuff2
      </div>
    </div>
  ) //everything wrapped into one single div
}

Answer 3

我们可以通过以下方法在 React Native 中更好地处理它。

因为，base64 图像在开箱即用的 React Native 中呈现。

所以对于你的情况，

获取占位符图像的 base64 数据。
在你的组件中，

const placeholderBase64image = "data:image/png;base64 [yourbase64imagedata]"
内部视图，用作：

<Image source={{ uri: yourImageUri ? yourImageUri : placeholderBase64image }}/>

Answer 4

在 React Native 图像中添加占位符图像。使用 defaultSource 标签

<Image source={{ uri: require('../images/dummy.png')}} 
            style={styles.itemImage}
            defaultSource={images.dummy} />

Answer 5

这对我有用：

<Image source={ item.img ? { uri: item.img } : require('../images/dummy.png')} />

如果 item.image 为 null (React Native)，则使用占位符图像

Use Placeholder Image if the item.image is null (React Native)

reactjs

react-native

react-native-flatlist