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, 這樣就會觸發整個組件重繪。