React-Native：将图像源更改为“null”后图像不会在 IOS 上消失

Question

如果我将图像源的状态更改为“null”，图像应该会消失，但不会。此问题发生在 IOS 上，但在 Android 上正常工作。我正在使用 RN v 0.64.2。在之前的版本 0.60.1 上，这在两个平台上都能正常工作。

编辑：也尝试使用最新的 RN 版本 0.66.4，但仍然无法正常工作。

我创建了一个非常简化的测试应用程序来重现此问题。代码如下：

import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, Pressable} from 'react-native';

class App extends Component {
    constructor (props) {
        super(props);
        this.state = {
            image_source: require('./test.png')
        }
    }

    removeImage = () => {
        this.setState({image_source: null});
        //this.setState({image_source: require('./test2.png')});
    }

    checkImage = () => {
        alert(this.state.image_source);
    }

    render() {
        return (
            <View>
                <Text style={{marginTop: 200}}>
                    test text
                </Text>
                <Image
                    style={{width: 100, height: 100}}
                    source={this.state.image_source}
                />
                <Pressable
                    style={{width: 80, height: 25, backgroundColor: 'blue'}}
                    onPress={() => this.removeImage()}
                >
                </Pressable>
                <Pressable
                    style={{width: 80, height: 25, backgroundColor: 'red'}}
                    onPress={() => this.checkImage()}
                >
                </Pressable>
            </View>
        );
    }
}

const styles = StyleSheet.create({
})

export default App;

单击蓝色矩形会将图像源的状态更改为“null”，并且图像应该消失，但不会。红色矩形验证状态已更改为“null”。我可以切换到不同的图像；可以正常工作，只是无法删除它。

Answer 1

尝试在组件生命周期中设置图片

import React, {Component} from 'react';
    import {View, StyleSheet, Text, Image, Pressable} from 'react-native';
    
    class App extends Component {
        constructor (props) {
            super(props);
            this.state = {
                image_source:null
            }
        }
    
    componentDidMount(){
       this.setState({image_source: require('./test.png')});
    }
    
        removeImage = () => {
            this.setState({image_source: null});
            //this.setState({image_source: require('./test2.png')});
        }
    
        checkImage = () => {
            alert(this.state.image_source);
        }
    
        render() {
            return (
                <View>
                    <Text style={{marginTop: 200}}>
                        test text
                    </Text>
                    <Image
                        style={{width: 100, height: 100}}
                        source={this.state.image_source}
                    />
                    <Pressable
                        style={{width: 80, height: 25, backgroundColor: 'blue'}}
                        onPress={() => this.removeImage()}
                    >
                    </Pressable>
                    <Pressable
                        style={{width: 80, height: 25, backgroundColor: 'red'}}
                        onPress={() => this.checkImage()}
                    >
                    </Pressable>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
    })
    
    export default App;

如果这没有帮助，我们经常将这个包用于项目 https://www.npmjs.com/package/react-native-fast-image