如果项目图像为null(React Native)，请使用占位符图像

Question

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

问题：

1. 我想使用``要求''使用占位符图像。它是使用单个卷发。<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

尝试此

       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

您正在寻找一个完整的反应组件。基于完成的API调用控制渲染的一种简单方法是将其用作承诺，如果您精通承诺，则使用.then使用CC_4：

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

我们可以通过以下方法更好地在反应本机中处理它。

as base64映像在箱子中呈现在反应本机中。

因此，对于您的情况，

1. 获取占位符图像的base64数据。

2. 在您的组件中，

   const placeholderBase64image = "data:image/png;base64 [yourbase64imagedata]"

3. 内部视图，将其用作：

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

Answer 4

这对我有用：

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

Answer 5

在React Native Image中添加位置支架图像。使用DefaultSource标签

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