我有三个TouchableHighlight元素包装三个视图(彼此对齐)。 Onpress我想改变风格(backgroundColor)和视图的图像(按下的视图将变为活动状态)。React Native - 如何更改视图的样式和图像onPress
- 活动视图 - 的backgroundColor
<View style={styles.circle}>
应该成为“红”,图像源应该是“箭头双赢active.png”<Image source={require('../images/arrow-win.png')} style={styles.arrowWin}></Image>
- 其他两种看法仍然不变
会是什么最好的办法呢?
下面是截图:
这里是我到目前为止的代码:
import React from 'react'
import {
View,
ListView,
ScrollView,
StyleSheet,
Image,
TouchableHighlight,
} from 'react-native'
const changeStyle =() => {
console.log('change style')
}
const appView = (game, date) =>
<ScrollView style={styles.container}>
<View style={styles.step}>
<View style={{flex:1}}>
<View style={styles.pickContainer}>
<TouchableHighlight onPress={() => changeStyle()} style={{flex:1}}>
<View style={styles.pickWrapper}>
<View style={styles.circle}>
<Image source={require('../images/arrow-win.png')} style={styles.arrowWin}></Image>
</View>
</View>
</TouchableHighlight>
<TouchableHighlight style={{flex:1}}>
<View style={styles.pickWrapper}>
<View style={styles.circle}>
<Image source={require('../images/arrow-draw.png')} style={styles.arrowDraw}></Image>
</View>
</View>
</TouchableHighlight>
<TouchableHighlight style={{flex:1}}>
<View style={styles.pickWrapper}>
<View style={styles.circle}>
<Image source={require('../images/arrow-win.png')} style={styles.arrowWin}></Image>
</View>
</View>
</TouchableHighlight>
</View>
</View>
</View>
</ScrollView>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#e1e1e1'
},
step: {
backgroundColor: '#ffffff',
borderRadius: 4,
borderLeftWidth: 5,
flex: 1,
marginLeft: 10,
marginRight: 10,
marginBottom: 10,
paddingLeft: 15,
paddingRight: 10,
paddingTop: 15,
paddingBottom: 15,
shadowOffset: {
width: 0,
height: 2,
},
shadowRadius: 2,
shadowOpacity: 0.2,
shadowColor: 'black',
textAlign: 'center',
},
heading: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 15,
color: '#333333',
},
pickContainer: {
flex:1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
pickWrapper: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
marginTop: 10,
},
circle: {
height: 60,
borderRadius: 30,
width: 60,
backgroundColor: '#eeeeee',
alignItems: 'center',
justifyContent: 'center',
},
arrowWin: {
width: 34,
height: 28,
},
arrowDraw: {
width: 18,
height: 8,
},
})
export default appView
你能告诉你想替换什么样式,你想要替换什么样的图像?它不清楚所有三个图像是一起出现还是它们在印刷机上旋转? –
当然,我刚刚更新了有关风格的更多细节。任何按下的视图都将变为活动状态,而其他两个视图则不活动。 – John