React Native TouchableOpacity组件常用属性

TouchableOpacity组件常用属性

Posted by HuberyYang on December 25, 2022

TouchableOpacity是React Native中的一个可点击的组件,可以在用户点击时触发相应的事件,应该是平常使用最多的类APPButton组件。 使用TouchableOpacity之前需要先了解其常用属性:

style

style 组件的样式,可以设置宽度、高度、布局等样式属性

<TouchableOpacity style=>
  <Text style=>Click me</Text>
</TouchableOpacity>

activeOpacity

点击时组件的透明度,默认值为0.2

<TouchableOpacity activeOpacity={0.5}>
  <Text>Click me</Text>
</TouchableOpacity>

disabled

是否禁用组件的点击事件,默认值为false

<TouchableOpacity disabled={true}>
  <Text>Click me</Text>
</TouchableOpacity>

hitSlop

点击范围,如果需要扩大点击范围,可以使用这个属性

<TouchableOpacity hitSlop=>
  <Text>Click me</Text>
</TouchableOpacity>

testID

用于在自动化测试中使用的ID

<TouchableOpacity testID="my-button">
  <Text>Click me</Text>
</TouchableOpacity>

onPress

当用户点击组件时要触发的回调函数

<TouchableOpacity onPress={() => console.log('I am clicked!')}>
  <Text>Click me</Text>
</TouchableOpacity>