React Native按下按钮呈现的效果

实现点击“在线客服“”和“设置“”一栏背景色由#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, 这样就会触发整个组件重绘。