Question

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

问题：

我想使用＆＃39; require＆＃39;来使用占位符图片。并且它使用单花括号。 <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 /加载逻辑无关。事实上，你试图返回超过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
}

Answer 3

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

因为，base64图像以开箱即用的方式呈现原生。

所以对你的情况来说，

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

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

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

Answer 4

在反应本地图像中添加占位符图像。使用defaultSource标签

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

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

4 个答案: