React Native常用组件-点击组件
2024/5/30 23:02:37
本文主要是介绍React Native常用组件-点击组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Button
用于接收用户点击行为,并触发相应的操作。
常用的属性:
title:设置按钮上显示的文字
disabled:设置按钮是否可以点击
常用的事件:
onPress:设置按钮的点击事件
例子:
import React from 'react'; import { Button, Alert } from 'react-native'; const Example = () => ( <Button title="点击我" onPress={() => Alert.alert('按钮被点击')} /> ); export default Example;
RN中Button可以使用的属性比较少,并且没有style属性,因此我们通常在Button外层包裹View组件。
TouchableOpacity
一个基于不透明度的触摸容器,按下时会降低透明度,以示交互。
常用的属性:
activeOpacity:设置TouchableOpacity激活时,以多少不透明度显示(0 到 1 之间,默认值为 0.2),数值越小越透明
disabled:设置TouchableOpacity是否可以点击
常用的事件:
onPress:设置TouchableOpacity的点击事件
例子:
import React from 'react'; import { TouchableOpacity, Text } from 'react-native'; const Example = () => ( <TouchableOpacity activeOpacity={1} onPress={() => console.log('区域被点击')} style={{ padding: 10, backgroundColor: '#DDDDDD' }} > <Text>点击我</Text> </TouchableOpacity> ); export default Example;
TouchableHighlight
与TouchableOpacity类似,当按下TouchableHighlight的时候,透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。
常用的属性:
activeOpacity:设置TouchableHighlight激活时,以多少不透明度显示(0 到 1 之间,默认值为 0.85),数值越小越透明
underlayColor:设置按下时显示出来的底层颜色
disabled:设置TouchableOpacity是否可以点击
常用的事件:
onPress:设置TouchableOpacity的点击事件
例子:
import React from 'react'; import { TouchableHighlight, Text } from 'react-native'; const Example = () => ( <TouchableHighlight activeOpacity={0.2} underlayColor="#fff" onPress={() => console.log('区域被点击')} > <Text>点击我</Text> </TouchableHighlight> ); export default Example;
TouchableWithoutFeedback
最基本的触摸组件,在按下的时候,没有任何视觉上的反馈,也不能设置style。
常用的事件:
onPress:设置TouchableWithoutFeedback的点击事件
例子:
import React from 'react'; import { TouchableHighlight, Text } from 'react-native'; const Example = () => ( <TouchableWithoutFeedback onPress={() => console.log('区域被点击')} > <Text>点击我</Text> </TouchableWithoutFeedback> ); export default Example;
这篇关于React Native常用组件-点击组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue