React Native Snap carousel调用Wordpress API获取图片不显示问题

1. 特色图片字段取值异常 #

默认WordPress REST API的posts接口不会返回better_featured_image字段，只有提前安装了对应特色图片增强插件，或者在主题functions.php中添加钩子自定义REST返回字段时，这个字段才会存在。
另外就算该字段存在，如果某篇文章没有设置特色图片，字段值会为null，直接访问source_url会抛出异常，最终导致illustration取值为undefined。

修复方法：

• 可以用原生逻辑获取：先取x.featured_media字段值，如果数值大于0说明有设置特色图片，再请求对应媒体接口拼接图片地址；也可以直接在WP后端加钩子把特色图URL直接加到posts接口的返回值里
• 加空值兼容判断，代码示例：

const carouselItems = this.state.posts.map(function(x){
  return {
    title: x.title.rendered,
    // 多重空值判断，取不到值就用占位图地址
    illustration: x?.better_featured_image?.source_url || '你的占位图地址'
  }
})

2. state初始化类型错误 #

你初始化state时posts的值是空对象{}，但WP API返回的posts是数组类型，虽然当前逻辑暂时运行正常，但属于隐性bug，建议修改初始化配置：

this.state = {
  activeIndex:0,
  posts: [], // 改为空数组
  loading: true,
}

3. Snap Carousel配置错误 #

当前配置sliderWidth={100}不符合要求，这个参数需要设置为轮播容器的实际宽度，一般取设备屏幕宽度，否则会导致组件布局异常，也可能触发图片渲染问题：
先引入API获取屏幕宽度：

import { Dimensions } from 'react-native';
const { width: screenWidth } = Dimensions.get('window');

再修改轮播配置：

<Carousel
  // 其余原有配置不变
  sliderWidth={screenWidth}
  itemWidth={350}
/>

4. renderItem绑定优化 #

当前直接传递renderItem={this.renderItem}，如果后续renderItem内部需要访问组件实例的this会报错，建议提前绑定：
可以在constructor里添加绑定：

this.renderItem = this.renderItem.bind(this);

也可以直接把renderItem改成箭头函数写法：

renderItem = ({item,index}) => {
  // 原有渲染逻辑不变
}

内容的提问来源于stack exchange，提问作者Vikas Bukhari