<html>
React Native从零開始（十一）Button的使用
React Native在新的版本号中加入了Button的控件，我也忘记是那个版本号了。反正不用像曾经那样我们去自己用TouchableOpacity来写了。怎么说吧我认为有利也有弊。感觉TouchableOpacity更加的灵活吧。
会找时间写一下自己的Button（TouchableOpacity。。。）
一、基本属性
accessibilityLabel string：用于给残障人士显示的文本（比方读屏器软件可能会读取这一内容）
color color ：文本的颜色(iOS)。或是button的背景色(Android)
disabled bool ：设置为true时此button将不可点击
onPress function ：用户点击此button时所调用的处理函数
效果图
二、总体的代码
import {
AppRegistry,
StyleSheet,
View,
Button,
Alert,
} from 'react-native';
function ClickBtn() {
alert("aaa");
}
function ChangeDisable() {
this.setState({
disabled: this.state.disabled ? false : true
});
}
export default class ActivityIndicatorDemo extends Component {
constructor(props){
super(props);
/*用来指示是否显示Loading提示符号*/
this.state = {
disabled : false,
}
}
render() {
return (
<View style={styles.container}>
<Button
onPress={ClickBtn}
title="Learn More"
color="green"
disabled={this.state.disabled}
accessibilityLabel="Learn more about this purple button"
/>
<Button
onPress={ChangeDisable.bind(this)}
title="是否可以点击"
color="gray"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
}
}
版权声明：本文为博主原创文章，未经博主同意不得转载。
举报
- 本文已收录于下面专栏：
- 从零開始学习React Native
相关文章推荐
-
react native Button 使用具体解释
Button事实上就是 Touchable（TouchableNativeFeedback、TouchableOpacity）和Text封装而来，以下是Button的部分源代码：render() { co...
- mengks1987
- 2017-04-10 10:17
- 909
-
React Nativebutton具体解释|Touchable系列组件使用具体解释
在做App开发过程中离不了的须要用户交互，说到交互。我们首先会想到的就是button了，在React Native中没有专门的button组件。为了能让视图可以响应用的的点击事件，我们须要借助Touchablexx...
- fengyuzhengfan
- 2017-01-10 17:16
- 3685
-
React Native开发之button的使用
button是移动开发中一个很经常使用的一个控件。在RN中使用button有3种：TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback。 Toucha...
- bboyklc
- 2016-03-08 16:05
- 5148
-
React Native Button实现
使用React Native实现Button的效果： 0. 概述 使用React Native的TouchableHighlight组件包装Text、Image或其它组件。由于To...
- henglei1
- 2016-09-24 17:49
- 3764
-
React Native 自己定义圆角button的封装
前段时间一直在做react native开发，一直在忙，也没时间写东西，这次就打算认真地写点东西了。 感觉react native开发就是要先写组件（component），然后用组件去组装页面。组...
- BingHongChaZuoAn
- 2016-10-13 19:49
- 4488
-
React-native第一课，Button的加入
react-native第一课之Button的加入
- LemonGirls
- 2016-04-21 16:20
- 2673
-
【React Native开发】React Native控件之TextInput组件解说与QQ登录界面实现(11)
(一)前言 今天我们一起来看一下文本输入框TextInput组件的相关使用解说以及模仿实现一下QQ登录界面的效果。详细环境搭建以及相关配置的请查看之前的相关文章。 刚创...
- jiangqq781931404
- 2016-01-26 20:07
- 9457
-
React Native Button使用
属性accessibilityLabel string 用于显示可訪问性功能的文本 color color 文本的颜色（IOS），或button的背景颜色（Android） disabled bool If ...
- tsdfk1455
- 2016-10-31 18:27
- 592
-
自用Android资源訪问
Android资源訪问 一、资源訪问：【掌握】 （一）、概念： Android中的资源是指能够在代码中使用的外部文件，这些文件作为应用程序的一部分。被编译到应用程序中。在项目中。这些...
- SuperBigLw
- 2016-12-07 10:36
- 387
-
Android RecyclerView 具体解释（二） 点击事件绑定、瀑布流和Grid的实现
Android RecyclerView 具体解释（二） 点击事件绑定和瀑布流Grid的实现 一丶点击事件的绑定 我们參考listView的onItemClickListener （1）返回值为v...- SuperBigLw
- 2016-11-29 14:55
- 4779
收藏助手
不良信息举报
0条评论