javascript - React Native - 为什么我的图像按钮在 Android 上闪烁？

Question

我有一个简单的图像按钮，它会在 TouchStart 和 onRelease 上更改其图像。在 iO 上，它的工作方式与预期一致，但在 Android 上，当图像发生变化时，按钮会闪烁。 看起来，如果每次我触摸图像时都必须重新加载图像。

class MyApp extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={ styles.container }>
                <ImageButton
                    style={ styles.button }/>
            </View>
        );
    }
}
class ImageButton extends React.Component {

    constructor(props: {}) {
        super(props);

        this.image = {
            normal: require('./img/button.png'),
            highlight: require('./img/button-touched.png')
        };

        this.state = {
            image: this.image.normal
        };
    }

    onTouchStart() {
    
        // do some stuff
        
        // set the highlighted image
        this.setState({
            image: this.image.highlight
        });
    }

    onTouchEnd() {
        this.setState({
            image: this.image.normal
        })
    }

    onTouchCancel() {
        this.setState({
            image: this.image.normal
        });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            image: nextProps.image.normal
        });
    }

    render() {
        return (
            <View style={ this.props.style }
                  onStartShouldSetResponder={ () => true }
                  onResponderGrant={ this.onTouchStart.bind(this) }
                  onResponderRelease={ this.onTouchEnd.bind(this) }
                  onResponderTerminate={ this.onTouchCancel.bind(this) }
                  onResponderReject={ this.onTouchCancel.bind(this) }>
                <Image style={ styles.image } source={ this.state.image } resizeMode="stretch" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#E4E4E4',
    },
    button: {
        backgroundColor: 'transparent',
    },
});

AppRegistry.registerComponent('schwein', () => Schwein);

Answer 1

图像在每个平台上的实现略有不同，所以这确实可能会发生。我建议使用启动时加载的这些图像创建组件，然后使用样式定义的不透明度控制其可见性。它应该按您的预期工作，不会闪烁。