React Native 的 Button 组件的 disabled 属性

返回上一级

React Native 中的 Button 是一个始终都会显示的组件,因此没有属性可以用来设置是否显示。

但 React Native 的 Button 提供了 disabled 属性用于设置该按钮是否可用。

disabled 属性的值是一个布尔类型的值,false 表示 可用true 表示 不可用

  1. disabled={false} 这是默认值,表示该按钮可用,这个在 UI 上的表现就是: 正常显示且可点击
  2. disabled={true} 表示该按钮不可用,这个在 UI 上的表现就是: 变灰且不可点击

该属性的默认值为 disabled 也就是可用

导入模块

import { Button } from 'react-native';

使用语法

Slider 组件可用

<Button disabled={false} />

Picker 组件不可用

<Button disabled={true} />

属性说明

属性 类型 默认值 是否必传 平台 说明
disabled bool false iOS,Android 用于设置按钮是否可用

范例

下面的范例,有两个按钮,其中第一个按钮可以点击,但第二个按钮则不可点击

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

export default class App extends React.Component {

  render() {
    return (
      <View>
        <Button 
          onPress={(e) => Alert.alert("你点击了按钮")}
          title="快点我"
          disabled={false}
          color="#841584"
          accessibilityLabel="please press me"
        />
        <Button 
          onPress={(e) => Alert.alert("你点击了按钮")}
          title="快点我"
          disabled={true}
          color="blue"
          accessibilityLabel="please press me"
        />
      </View>
    );
  }
}

返回上一级

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.