React Native从零开始（十一）Button的使用

React Native从零开始（十一）Button的使用

React Native在新的版本中添加了Button的控件，我也忘记是那个版本了，反正不用像以前那样我们去自己用TouchableOpacity来写了，怎么说吧我觉得有利也有弊。感觉TouchableOpacity更加的灵活吧。

会找时间写一下自己的Button（TouchableOpacity。。。）

一、基本属性

accessibilityLabel string：用于给残障人士显示的文本（比如读屏器软件可能会读取这一内容）

color color ：文本的颜色(iOS)，或是按钮的背景色(Android)

disabled bool ：设置为true时此按钮将不可点击

onPress function ：用户点击此按钮时所调用的处理函数

效果图

二、整体的代码

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>
    );
  }
}