Button组件简介

Button组件是一个简单的跨平台的按钮组件。Button组件可以被点击，点击之后可以触发执行特定的动作，并且会有一个渐变的效果反馈给用户。官方提供的Button组件可以有如下一些样式，Button组件的样式在iOS客户端以及Android客户端的显示会有差异。

如果官方提供的Button组件外观并不符合所需的设计要求，可以使用TouchableOpacity或是TouchableNativeFeedback组件来制作自定义的按钮，或者也可以在github.com网站上搜索'react native button'来看看社区其他人的作品。

在React Native中，我们可以使用如下的方式创建一个简单的Button组件。

<Button
  title="99iOS"
  color="red"
/>

Button组件的属性

Button组件中定义了如下几个常用的属性和函数，用于定制Button组件的样式以及行为。

• title，按钮内显示的文本；

• color，在iOS中，用于设置按钮文本的颜色，在Android中，用于设置按钮的背景色；

• onPress，用户点击按钮时所调用的处理函数，也就是说，处理按钮的点击事件只需要给Button组件的onPress属性赋值就可以了。例如，下面的代码中，当点击按钮会调用onButtonPress()函数，显示一个提示框。

onButtonPress() {
    Alert.alert('按钮被点击');
  }

<Button
  onPress={this.onButtonPress}
  title="99iOS"
  color="red"
/>

• disabled，设置按钮是否可以被点击，当设置为true时按钮将不能够被点击。如下代码中，按钮将不能够被点击。

<Button 
onPress={this.onButtonPress} 
title="不能点击的按钮" 
color="red" 
disabled={true}/>

示例代码

下方的示例代码中，演示了如何使用Button组件，包括Button组件的创建、样式定制以及点击方法的设置等功能。

• 在终端中执行如下命令，创建ButtonDemo工程；

react-native init ButtonDemo

• 使用Atom打开工程的index.ios.js文件，编写组件所使用的样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

• 在一个View组件中，添加三个Button组件，对Button组件的样式以及点击行为进行设置。

export default class ButtonDemo extends Component {
  //Button组件点击后执行的函数
  onButtonPress() {
    Alert.alert('按钮被点击');
  }
  //添加三个Button组件
  render() {
    return (
      <View style={styles.container}>
        <Button title="99iOS" color="blue"/>
        <Button onPress={this.onButtonPress} title=" 可以点击" color="red"/>
        <Button onPress={this.onButtonPress} title=" 不可以点击 " color="red" disabled={true}/>
      </View>
    );
  }
}

• 使用import加载项目所使用的模块，并且注册组件ButtonDemo成为整个应用的根容器。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Button,
  View,
  Alert,
} from 'react-native';

AppRegistry.registerComponent('ButtonDemo', () => ButtonDemo);

• 在终端中执行下面的命令运行程序，在iOS模拟器中可以看到显示的三个Button组件。

react-native run-ios

• 当点击按钮时，会调用onPress()函数，即调用iOS的提醒框控件给用户展示提示信息。

---