如何解决反应原生:当需要更改 uri 404 响应时,defaultImage 不会在 Flatlist 渲染项中呈现图像组件
当我想在找不到占位符 uri 图像时动态更改 uri 源时,尝试在 FlatList 组件中呈现 Image 组件时遇到一些麻烦。
目前它给我一个空白而不是占位符图像。我试图用 onError 道具处理,但没有奏效。
import noBrandlogo from "../assets/nologo.png";
export default function BrandsAsButtons() {
const { data,status,error } = useBrands();
const [,setBrandUUID] = useBrandID();
const [,setCategoryUUID] = useCategoryUUID();
const [loaded,setLoaded] = useState(true)
const defImageUri = {uri: Image.resolveAssetSource(noBrandlogo).uri};
<FlatList
horizontal
data={data}
keyExtractor={(item) => item.uuid.toString()}
renderItem={({ item }) => {
const image = {
uri: joinUrl(config.api.base_url,item.logo_path),};
return (
<View>
<TouchableOpacity
onPress={() => {
setBrandUUID(item.uuid);
}}>
<Image
source={loaded ? image : {uri: defImageUri}}
style={styles.logo}
onError={ ()=> setLoaded(false) }
/>
</TouchableOpacity>
</View>
);
}}
/>
</View>
该组件主要用于呈现由从名为 useBrands()
的 Hook 接收的 Flatlist 道具呈现的多个图标,它通过 react-query
使用 get HTTP 请求调用服务器。>
data
是一个 json 文件,其中包含每个品牌图标的详细信息。在代码图像 uri 中需要加入一个配置 uri,该 uri 最终在 renderItem 道具表单 flatlist 中呈现
但是,当我想处理 uri 是一个不正确的网络的错误时,它使用占位符图像更改源,它要么抛出一个空的间隙。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。