如何在平面列表内反应原生的图像上设置 onError

如何解决如何在平面列表内反应原生的图像上设置 onError

我有一个页面，我可以在其中列出人员及其信息。我已经使用 Flatlist 来呈现我获得的 n 个数据以及分页。

<FlatList
    showsverticalScrollIndicator={false}
    data={this.state.records}
    keyExtractor={(item) => String(item.ServiceRequestID)}
    renderItem={({ item }) => (
    <View>
    <imagebackground
    source={{ uri: this.state.baseUserImagePath + item.ImagePath }}
    style={styles.image}
    imageStyle={{ borderRadius: h2p(48) }}
    />
    //other parts
    </View>
    )}
    onEndReached={()=>{//logic}}
    />

我希望为无法加载的图像加载默认用户图像（在我的情况下已在本地服务器中删除）。所以，我想在图像背景中添加 onError 属性。对于我可以使用的单个图像

onError={() => {this.setState({ image: require('../../assets/user.png') });}} 并使用 source={this.state.image}

如何对 Flatlist 中的图像执行此操作以处理我的情况。

解决方法

我们可以创建一个单独的组件并在 flatlist 的 renderItem 函数中使用它。

喜欢：

const FlatListComponent = props => {

    const [isError,setError] = useState(false)

    return (
        <View>
            <ImageBackground
              source={isError ? require('show-defaultImage') : { uri: props.image }}
              style={styles.image}
              imageStyle={{ borderRadius: h2p(48) }}
              onError{(e) => setError(true)}
             />
            //other parts
        </View>
    )

}

FlatList 代码

<FlatList
    showsVerticalScrollIndicator={false}
    data={this.state.records}
    keyExtractor={(item) => String(item.ServiceRequestID)}
    renderItem={({ item }) => (
        <FlatListComponent 
             image={this.state.baseUserImagePath + item.ImagePath}
        />
    )}
    onEndReached={()=>{//logic}}
/>