RN中的按钮
Touchable系列组件
为了能让视图能够响应用的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。
下面是四个Touchable系列的组件 一一举例
- TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。
- TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
- TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
- TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。
TouchableWithoutFeedback
TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意。
提示：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和ScrollView很类似。也就是TouchableWithoutFeedback之下必须只含有一个子View
export default class TouchableWithoutFeedbackTest extends Component {
constructor(props){
super();
this.state={
count:0
}
}
render() {
return(
<View>
<TouchableWithoutFeedback
onPress={()=> {
this.setState({count: this.state.count+1})
}}
onLongPress={()=>{
Alert.alert('提示','确定要删除吗？',[
{text:'取消',onPress:()=>{}, style:'cancel'},
{text:'确定',onPress:()=>{}, style:''}
])
}}
delayLongPress={5000}>
<View style={styles.button}>
<Text style={styles.buttonText}>
我是TouchableWithoutFeedback,单击我
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您单击了:{this.state.count}次</Text>
</View>
)
}
}
const styles = StyleSheet.create({
button:{
borderWidth:1,
},
buttonText:{
fontSize:18
},
text:{
fontSize:25
}
});
里面是空间的点击事件和长按事件
里面最常用的几个属性
- onPress(); 点击的时候
- onLongPress();长按的时候
- delayLongPress();长按的时间间隔
- disabled true-禁止再次点击 false-可以点击 这个属性可以达到禁用按钮的效果
- onPressIn()在开始点击的时候触发的事件
- onPressOut() 在结束点击的时候触发的事件
- delayPressIn() 从用户点击按钮到onPressIn 被回调的延时
- delayPressOut() 从用户点击按钮后到onPressOut（）的延时时间
下面是 disabled的事例
export default class DisabledText extends Component {
constructor(props){
super();
this.state={
press:false,
text:'啥也没有'
}
}
render() {
return (
<View>
<TouchableWithoutFeedback
onPress={()=>{
this.setState({
press:true,
text:'正在登陆....'
})
setTimeout(()=>{
this.setState({
press:false,
text:'暂时不能登录....'
})
},2000)
}}
disabled={this.state.press}
>
<View>
<Text>
点几发动机阿卡丽附近
</Text>
</View>
</TouchableWithoutFeedback>
<Text>
{this.state.text}
</Text>
</View>
)
}
}
TouchableHighlight的使用
TouchableHighlight 是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback 的基础上添加了一些UI上的扩展，既当手指按下的时候，该视图的不透明度会降低，同时会看到相应的颜色(视图变暗或者变亮)，从TouchableHighlight 的源码中我们可以看出，其实这个颜色就是在TouchableHighlight 的最外层个添加了一个View，通过改变这个View的背景色及透明度来达到这一效果。
- activeOpacity
我们可以通过activeOpacity来设置TouchableHighlight 被按下时的不透明度，从TouchableHighlight 的源码中可以看出，它的默认不透明度为0.85，我们可以根据需要进行调节。 - underlayColor 按下去的颜色 默认状态下为balck黑色。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableWithoutFeedback,
Alert,
TouchableHighlight
} from 'react-native';
export default class TouchableHighlightTest extends Component {
constructor(props){
super();
this.state={
count:0
}
}
render() {
return(
<View>
<TouchableHighlight
activeOpacity={0.5}
underlayColor='green'
onHideUnderlay={()=>{
this.setState({text:'衬底被隐藏'})
}}
onShowUnderlay={()=>{
this.setState({text:'衬底显示'})
}}
onPress={()=>{
}}
>
<View >
<Text >
TouchableHighlight
</Text>
</View>
</TouchableHighlight>
<Text>{this.state.text}</Text>
</View>
)
}
}
TouchableOpacity的使用
TouchableOpacity也是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，但这些扩展相比TouchableHighlight 少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击的。
在扩展属性方面TouchableOpacity相比TouchableHighlight，就少了很多，只有一个activeOpacity，来设置按下去的透明度。
export default class TouchableOpacityTest extends Component {
constructor(props){
super();
this.state={
count:0,
text:'d'
}
}
render() {
return(
<View>
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>{
this.setState({
text:'点击了'
})
}}>
<View>
<Text>
TouchableHighlight
</Text>
</View>
</TouchableOpacity>
<Text>{this.state.text}</Text>
</View>
)
}
}
TouchableNativeFeedback
为了支持Android5.0新增的触控反馈，React Native加入了TouchableNativeFeedback 组件，TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果。我们可以通过background 属性来自定义原生触摸操作反馈的背景。(只支持android)
里面有个属性 是 background
决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象：
- TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景。(?android:attr/selectableItemBackground)
- TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+适用。
- TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外。（参见原生的actionbar buttons作为该效果的一个例子）。这个背景类型只在Android API level 21+适用也就是Android5.0或以上设备。
export default class TouchableNativeFeedbackTest extends Component {
constructor(props){
super();
this.state={
count:0,
text:'d'
}
}
render() {
return(
<View>
<TouchableNativeFeedback
background={TouchableNativeFeedback.SelectableBackgroundBorderless()}>
onPress={()=>{
this.setState({
text:'点击了'
})
}}>
<View>
<Text>
TouchableHighlig
</Text>
</View>
</TouchableNativeFeedback>
<Text>{this.state.text}</Text>
</View>
)
}
}
参考地址 传送门
