实现点击“在线客服“”和“设置“”一栏背景色由#ffffff变为#f0f2f5
<View style={styles.settingView}>
<TouchableHighlight onPress={()=>{}}
onHideUnderlay={()=>{this.setState({ pressed1: false })}}
onShowUnderlay={()=>{this.setState({ pressed1: true })}}
underlayColor={'transparent'}>
<View style={[styles.button,this.state.pressed1 ?{backgroundColor:'#f0f2f5'}:{backgroundColor:'#ffffff'}]}>
<Image source={require('./../image/icon/service.png')} style={{width:21,height:18,alignSelf:'center',backgroundColor:'transparent'}}/>
<Text style={{marginLeft:15,fontSize:15,alignSelf:'center',width:width-84}}>在线客服</Text>
<Image source={require('./../image3/right.png')} style={styles.rightly}/>
</View>
</TouchableHighlight>
<View style={styles.dividerview}>
<Text style={styles.divider}></Text>
</View>
<TouchableHighlight onPress={()=>{}}
onHideUnderlay={()=>{this.setState({ pressed2: false })}}
onShowUnderlay={()=>{this.setState({ pressed2: true })}}
underlayColor={'transparent'}>
<View style={[styles.button,this.state.pressed2 ?{backgroundColor:'#f0f2f5'}:{backgroundColor:'#ffffff'}]}>
<Image source={require('./../image/icon/setting.png')} style={{width:21,height:18,alignSelf:'center'}}/>
<Text style={{marginLeft:15,fontSize:15,alignSelf:'center',width:width-84}}>设置</Text>
<Image source={require('./../image3/right.png')} style={[styles.rightly]}/>
</View>
</TouchableHighlight>
</View>
const styles = StyleSheet.create({
settingView:
{
height:105,
width:width,
marginTop:20,
// backgroundColor:'#FFFFFF',
},
button:
{
// flex:1,
height:52,
flexDirection:'row',
paddingLeft:15,
paddingRight:15,
// justifyContent:'space-between'
},
dividerview: {
flexDirection: 'row',
},
divider: {
flex: 1,
height: 1,
backgroundColor: '#ECEDF1',
},
rightly:
{
width:18,
height:18,
alignSelf:'center',
paddingRight:5,
backgroundColor:'transparent'
},
})
onPress={()=>{}}一定要有,要不然点击时没有效果。
如何区分什么时候是按下的,什么时候是按下松开的这就提上日程了。
处理这个问题需要请出React的State了。默认状态State是未按下(pressed为false),按下了改为pressed为true。就酱。
这需要用到TouchableHighlight
的两个事件onShowUnderlay
按下调用和onHideUnderlay
,这个在按下松开后调用。 在这两个事件发生的时候修改state, 这样就会触发整个组件重绘。