onError无效

Question

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或者编辑器版本有问题。

Answer 1

FE大公爵 2024-11-04 10:57:52

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

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