RN@0.49 Image Android模拟器中无法显示图片



  • 哈喽,如题。
    主要代码如下。

    <View style={styles.footContainer}>
                    <View
                        style={styles.flashContainer}
                    >
                        <TouchableOpacity
                            onPress={() => {
                                this.setState({ torchOn: !torchOn });
                            }}
                            style={styles.touchableContainerIOS}
                        >
                            <Image
                                source={{ uri: !!torchOn ? TorchOnImg : TorchOffImg }}
                                style={{ width: img_btn_size, height: img_btn_size }}
                                resizeMode={'contain'}
                            />
                        </TouchableOpacity>
                    </View>
                    <View style={{ flex: 1, alignItems: 'center' }}>
                        <TouchableOpacity
                            style={styles.touchableContainerIOS}
                            onPress={this.handleLaunchCameraRoll}
                        >
                            <Image
                                source={{ uri: CameraRollImg }}
                                style={{ width: img_btn_size, height: img_btn_size }}
                                // onError={({ nativeEvent: { error } }) => {
                                //     console.error(error, 'camera_roll imag onError');
                                // }}
                                onLoadStart={() => {
                                    console.log('camera_roll imag onLoadStart');
                                }}
                                onLoadEnd={() => {
                                    console.log('camera_roll imag onLoadEnd');
                                }}
                                resizeMode={'contain'}
                            />
                        </TouchableOpacity>
                    </View>
                </View>
    
    //styles 定义
    const styles = StyleSheet.create({
        footContainer:{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
        },
        flashContainer:{
            flex: 1,
            borderRightColor: '#808080',
            borderRightWidth: .8,
            alignItems: 'center',
        },
        photoContainer:{
            flex: 1, 
            alignItems: 'center',
        },
        touchableContainerAndroid:{
            padding: 5,
            backgroundColor: '#000000',
            borderRadius: 100,
            alignItems: 'center',
            justifyContent: 'center',
        },
        touchableContainerIOS:{
            padding: 10,
            backgroundColor: '#000000',
            borderRadius: 100,
            alignItems: 'center',
            justifyContent: 'center',
        },
        touchableTextAndroid:{
            width: 60,
            height: 30,
            textAlign: 'center',
            textAlignVertical: 'center',
        }
    })
    
    

    1,onError的回调可以被触发,但是打印出来的error信息是undefined。
    2,图片的uri是base64的串,可以在浏览器里正常打开;图片格式png。
    3,iOS加载正常。
    4,可以忽略样式定义里的IOS和Android的写法,那是实在加载不出来才分开去写的两个端的代码。

    所以实在想不明白究竟是什么原因导致了加载失败。有什么办法吗...



  • 你贴的代码看不出具体问题,我只能给点建议

    1. 本身rn版本太老了。onError一直有问题,到0.59才修复
    2. 不建议用base64来显示图片,既慢又占用大量内存,应该尽量使用直接路径
    3. 也不建议用CameraRoll,建议用一些社区维护的image picker
    4. 应该观察下adb logcat中是否有相关的报错信息


  • 多谢哈
    无奈呀;业务平台只支持这个版本的
    CameraRoll只是方法名哈,实际用的image-picker
    用base64只是为了排除import是否有问题,才直接转成base64的

    那我试下adb logcat 观察观察



  • @晴明
    放弃了。。除了console那一行,丝毫看不懂logicat出来的记录。。
    25e83eae-fb82-4a6f-b3cf-1447c7949fa5-image.png



  • @晴明
    好像有点发现;您觉得可以怎么解决?
    c95d8b9b-5f22-473e-9b61-1b5313e13c35-image.png



  • 那就拿着这个报错去google呗,然后就能发现是fresco(fresco是RN image的底层实现)的锅 https://github.com/facebook/fresco/issues/2021
    然后上面在1.8版本打了个补丁,然后RN要到0.57版本之后才升到1.10版本
    如果不能升级,那么回过头来想,这个bug与png格式有关,那就在image-picker里强制采用jpg格式咯?



  • This post is deleted!


  • @晴明
    可以了
    感谢感谢感谢❤️❤️*100


Log in to reply