onError无效

来源:7-4 Image构建精美ui

MC_inR067

2024-10-31

import { Image, StyleSheet, View } from "react-native";

import user7 from '../assets/user7.png';
import { imageUri } from "../constants/Uri";

export default () => {
    return (
        <View style={styles.root}>
            <Image
                style={styles.img}
                source={user7}//图片源1
                blurRadius={1}//镜像模糊
            />
            <Image
                style={styles.img}
                source={{ uri: 'xxx.xx.png' }}//图来源2
                defaultSource={user7}//加载失败默认图片
                fadeDuration={200}//加载过程动画
                onLoad={(event) => {
                    console.log(`Event : ${event.nativeEvent}`);
                }}
                onError={(error) => {
                    console.log('onError...');
                    console.log(error);
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#F5F5F5',
        justifyContent: 'center',
        alignItems: 'center',
    },
    img: {
        width: 250,
        height: 250,
        /**
         * 【缩放模式】
         * contain: 一边撑满了
         * center:如果图片大不会变大会直接在中间,如果图片小了下会自动缩小
         * cover: 放大到2边都撑满
         */
        resizeMode: 'contain',
        backgroundColor: 'green',
        marginVertical: 20,
        /**
         *  
         */
    },

});

老师,我这的onError和onLoad也有问题。
onError不会走
onLoad打印Event直接就是个 【 Event : [object Object]】

我看到也有其他同学这样是不是RN或者编辑器版本有问题。

写回答

1回答

FE大公爵

2024-11-04

先说onLoad,回调是正常的,因为你打印的是对象,要看具体内容可以解构,或者stringfy一下。

onError的回调官方文档没什么变化,function({ nativeEvent: { error } }) => void,你吧defaultSource去调,写一个错误的url,如果还不行,那QQ课程群联系我一下。

0
0

RN从0到1系统精讲与小红书APP实战

30+小案例+2个实战项目,快人一步提升个职业竞争力

295 学习 · 211 问题

查看课程