在iOS或安卓开发平台，Button绝对是我们常用的组件，接下来小萌说一说Button在react native中如何使用呢？
一、Button组件的属性：
accessibilityLabel: string
设置辅助功能是需要显示的文字。
color: string
这里有个区别，在Android设备上设置的是Button背景的颜色，在Ios设备上设置的是Button上文字的颜色。
disabled: boolean
设置Button是否可以点击。
onPress: () => any
设置Button的点击事件。
testID: string
设置Button的id，用于控件查找，类似于我们iOS中的button.tag。
title: string
设置Button上显示的文字。
在React-Native中Button只有以上6种属性，使用起来还是非常简单的。但是你有没有注意Button并没有style属性，也就是说，不能通过style调整button的大小和布局，怎么办呢？很简单View组件是有style的吧，我们让Button的父组件是一个View就OK了。
下面来看具体使用方法：
首先 import中需要引入button组件
import React,{Component} from 'react';
import{
AppRegistry,
StyleSheet,
Button
}from 'react-native';
声明一个点击按钮的事件，比如弹出一个Dialog，别忘了还需要在import中添加Alert组件；
import{
AppRegistry,
StyleSheet,
Alert,
Button
}from 'react-native';
const onButtonPress = () => {
alert('点击了Button按钮');
};
暂时看不懂没关系，以后会具体学习的，现在只要知道这段代码会弹出一个Dialog就行了。然后就是在render中渲染就行了：
export default class App extends Component{
render(){
return(
<Button
title="我是按钮"
onPress={onButtonPress}
color="#841584">
</Button>
);
}
}
运行结果：
image.png
再来看一下disable属性的效果：
<Button
disabled = {true}
title="我是按钮"
onPress={onButtonPress}
color="#841584">
</Button>
注意看，是直接写disabled即可，Button默认是可点击的，添加disabled后就是不可点击状态，效果如下:
按钮背景自动变成了灰色，并且点击按钮也没有了任何响应。
image.png
以上就是Button的用法，下面继续学习如何自定义Button，因为在实际开发中自定义button总是不可缺少的，对不。
二、自定义Button
对于自定义Button官方给我提供了两种方式，分别是TouchableOpacity和TouchableNativeFeedback(Android平台专用)。
首先来看TouchableOpacity，我们要实现的最终效果如下:
代码如下:
export default class App extends Component{
render(){
return(
<TouchableOpacity onPress={onButtonPress} activeOpacity={0.2} focusedOpacity={0.5}>
<View style= {{justifyContent:'center',alignItems:'center',width:128,height:128,backgroundColor:'#841584'}}>
<Image source={require('./image/ic_search.png')}>
</Image>
<Text style={{color:'#ffffff'}}>ImageButton</Text>
</View>
</TouchableOpacity>
);
}
}
TouchableOpacity组件中使用了三个属性，具体含义：
onPress 指定点击事件；
activeOpacity 正常状态下的透明度；
focusedOpacity 点击状态下的透明度；
TouchableOpacity组件的子组件是一个View，里边又包含了一个Image和Text，最终构成了我们自定义的ImageButton属性。
TouchableNativeFeedback其实和TouchableOpacity使用方式差不多，只不过属性不太一样。
掌握了TouchableOpacity和TouchableNativeFeedback，我们就可以开心的定制各种各样的button了。
网友评论