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

Question

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

问题：

1. 我想使用“require”来使用占位符图像。它使用单花括号。<Image source={ require('../assets/images/robot-prod.png') } style={styles.palceholderImage}/>。而正常的图像渲染使用两个大括号{{uri: item.img}}。

2. 我应该内联运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

您正在寻找完整的 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/加载逻辑无关。事实上，您试图返回超过 1 个 html 或组件元素：

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

这里您渲染了 2 组项目。这就是“多个孩子”的含义。但这很容易解决。只需将物品包装在一个更大的容器中即可。

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