0
我有一个简单的图像按钮，它改变了它的图像onTouchStart和onRelease。在iOS上，它可以像预期的那样工作，但是在Android上，当图像改变时，按钮闪烁。 它看起来像是，如果每次我触摸它时都必须再次加载图像。React Native - 为什么我的图像按钮在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);