我有三个TouchableHighlight元素包含三个视图(彼此相邻排列) . Onpress我想改变样式(backgroundColor)和视图的图像(按下的视图将变为活动状态) .
-
活动视图 - backgroundColor
<View style={styles.circle}>
应该变为'red',图像源应为'arrow-win-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
1 回答
您必须将
AppView
更改为基于类的组件,因为您必须访问state
.