React Native交互组件之Touchable
来源:互联网 发布:mac磁盘工具找不到硬盘 编辑:程序博客网 时间:2024/05/22 17:33
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互。
TouchableHighlight:高亮触摸
当点击时,组件的透明度会改变,可以看到点击效果,TouchableHighlight只可以进行嵌套一层。其常用属性如下:
activeOpacity 点击时,组件的透明度。0-1
onHideUnderlay 当底层被隐藏时调用
onShowUnderlay 当底层显示时调用
style 风格
underlayColor 当点击组件时显示的颜色
TouchableOpacity:不透明触摸
activeOpacity 点击时,组件的透明度。0-1
常用的点击事件如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 Touchable交互
* 2016-09-19
*/
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
AlertIOS
} from
'react-native'
;
class
Project
extends
Component {
render() {
return
(
<View style={styles.container}>
<TouchableOpacity activeOpacity={0.5}
// onPress = {()=>this.activeEvent('点击')}
// onPressIn = {()=>this.activeEvent('按下')}
// onPressOut = {()=>this.activeEvent('抬起')}
onLongPress = {()=>
this
.activeEvent(
"长按"
)}
>
<View style={styles.innerViewStyle}>
<Text>我是可以点击的一个Text文本</Text>
</View>
</TouchableOpacity>
</View>
);
}
activeEvent(event){
AlertIOS.alert(event);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F5FCFF'
,
},
innerViewStyle: {
backgroundColor:
'red'
,
}
});
AppRegistry.registerComponent(
'Project'
, () => Project);
获取屏幕属性:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-12
*/
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
Text,
View
} from
'react-native'
;
//引入
var
Dimensions = require(
'Dimensions'
)
class
Project
extends
Component {
render() {
return
(
<View style={styles.container}>
<Text>当前屏幕的宽度:{Dimensions.get(
'window'
).width}</Text>
<Text>当前屏幕的高度:{Dimensions.get(
'window'
).height}</Text>
<Text>当前屏幕的分辨率:{Dimensions.get(
'window'
).scale}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//充满全屏
justifyContent:
'center'
,
//主轴对齐方式
alignItems:
'center'
,
//侧轴对齐方式
backgroundColor:
'#F5FCFF'
,
//背景色
}
});
AppRegistry.registerComponent(
'Project'
, () => Project);
完整源码下载:https://github.com/pheromone/React-Native-1
0 0
- React Native交互组件之Touchable
- React Native 组件之Touchable*源码解析
- [深入剖析React Native]React Native组件之Touchable*
- (五)React Native---Touchable组件
- React Native Touchable系列组件
- react native 封装Touchable 组件
- React Native控件之Touchable*系列组件详解(28)
- React Native——Touchable类组件
- react native Touchable 系列组件使用详解
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- [深入剖析React Native]React Native组件之Touchable*源码解析(1)
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- React Native-9.React Native Touchable组件详解
- React Native 之 Touchable 介绍与使用
- React Native组件篇(四) — Touchable系列组件
- 一起来点React Native——常用组件之Touchable系列
- React Native按钮详解|Touchable系列组件使用详解
- React Native按钮详解|Touchable系列组件使用详解
- collection接口
- C#三层架构的UserService类(注册登录使用)
- perl中的各种数据类型和引用
- 在Visual Studio 2013中Debug Slicer Python脚本
- 滴滴国际化项目 Android 端演进
- React Native交互组件之Touchable
- JAVA: httpclient 详解
- 从源码分析AsyncTask
- 聊天界面
- linux 挂载
- /etc/hosts文件修改后如何生效
- iOS-重力感应
- 网络编程三:SSLSocket通信
- APACHE支持.htaccess以及 No input file specified解决方案