我正在尝试创建一个 React 组件,该组件在按下时在黑色和白色之间切换 Logo 。我想在以后的组件中加入更多功能,但 changeLogo()
console.log 甚至不会显示在调试器中。
感谢任何帮助/提示!
native react :0.39.2 react :^15.4.2
import React, { Component } from 'react';
import { View, Image } from 'react-native';
export default class TestButton extends Component {
constructor(props) {
super(props);
this.state = { uri: require('./icons/logo_white.png') }
}
changeLogo() {
console.log('state changed!');
this.setState({
uri: require('./icons/logo_black.png')
});
}
render() {
return (
<View
style={styles.container}
>
<Image
source={this.state.uri}
style={styles.logoStyle}
onPress={this.changeLogo}
/>
</View>
);
}
}
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'blue',
},
logoStyle: {
width: 200,
height: 200,
marginLeft: 10,
marginRight: 5,
alignSelf: 'center',
},
};
最佳答案
onPress
Prop 不适用于 Image成分。你需要用 TouchableHighlight 包裹它像这样的组件:
import { View, Image, TouchableHighlight } from 'react-native';
...
<TouchableHighlight onPress={() => this.changeLogo()}>
<Image
source={this.state.uri}
style={styles.logoStyle}
/>
</TouchableHighlight>
关于javascript - React-Native 改变 <Image/> 来源与状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41668331/