[React-Native]RN组件学习-Touchable*系列

8****月****19日

[React-Native]RN组件学习-Touchable*系列

Touchable*系列组件实现了点击等属性的操作，可以用来包装各种View，从而达到其点击效果的实现。

你可以为Touchable*系列组件实现包装，但是你的包装不会影响到整体原有布局，除非你再在Touchable*系列上再次添加相关的样式。

TouchableWithoutFeedback

该组件没有触摸，按压的反馈

• onPressIn，onPress和onPressOut

从实验结果来看，onPress是由onPressIn和onPressOut联合发起的：

会先触发onPressIn，然后再触发onPressOut,最终触发onPress

• delayPressIn
• 可以利用这个属性，实现该控件长按几秒的效果实现：

设置控件在触发onPressIn的延迟

delayPressIn={2000}
onPressIn={()=>{alert("on header pressed in!");}}

基本上和：

onLongPress={()=>{alert("长按了");}}

是一样的，但是，我们可以利用delayPressIn实现我们希望的几秒长按延迟。

• delayPressOut
• 实现在点击离开后的延迟时间后出发onPressOut属性

TouchableHighlight

按压的时候有颜色高亮

• activeOpacity

在触压得时候的空间的透明度

• underlayColor

触压的时候的背景变化的颜色

TouchableOpacity

按压的时候按压的控件有透明度的变化，你可以通过设置activeOpacity进行设置

使用TouchableHighlight和TouchableOpacity，通过activeOpacity设置颜色透明度的变化的时候的实现异同点

• TouchableHighlight

activeOpacity={0.6}
onPress={()=>{alert("dddd");}}

你需要同时设置以上的两个属性实现按压的透明度的变化，而：

• TouchableOpacity

activeOpacity={0.6}

只需要设置这个就行了，感觉上TouchableOpacity是对TouchableHighlight的进一步封装。

TouchableNativeFeedback

这是一个具备Android原生********样式********的组件

• background

background={TouchableNativeFeedback.SelectableBackground()}

会使用一个android原生的背景，这是一个矩形的背景

background={TouchableNativeFeedback.SelectableBackgroundBorderless()}

这是一个圆形的背景

background={TouchableNativeFeedback.Ripple('blue',false)}

通过传递两个参数，你可以设置点击的背景的颜色和是否是圆形（true）