Question

我在react native上创建了一个自定义按钮，并尝试在凭据不良或加载后使其显示为禁用状态（通过降低不透明度）。

我的组件正常工作，但不会降低不透明度

我已经尝试过这些值，但是似乎什么也没有，我是新手，所以也许我缺少明显的东西。

这是我的按钮

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity } from "react-native";
import colors from "../config/colors";

export default class Button extends React.Component {
  constructor(props){
      super(props);

      this.state = {
        label: "",
        disabled: true
      }
  }

  render (){
    const { disabled, label, onPress } = this.props;
    const containerStyle = [
      styles.container,
      disabled ? styles.containerDisabled : styles.containerEnabled
    ];
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={onPress}
        disabled={disabled}
      >
        <Text style={styles.text}>{label}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.BLUE,
    marginBottom: 12,
    paddingVertical: 12,
    borderRadius: 4,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255, 255, 255, 0.7)",
  },
  containerEnabled: {
    opacity: 1
  },
  containerDisabled: {
    opacity: 0.3
  },
  text: {
    color: colors.WHITE,
    textAlign: "center",
    height: 20
  }
});

它似乎不透明：1，即使我从一开始就希望它是0.3。

在我的app.js上，我称之为

constructor(props){
     super(props);

     this.state = {
       email: "",
       password: "",
       emailTouched: false,
       passwordTouched: false
     }

...

render() {
    const {
      email,
      password,
      emailTouched,
      passwordTouched
    } = this.state;

...

<Button
            label={strings.LOGIN}
            onPress={this.handleLoginPress}
            disabled={!email || !password}
          />

Answer 1

在您的render方法中-您没有任何禁用的道具，而是使用const {disabled} = this.state。应该起作用

创建了一个自定义按钮组件，但我无法使其显示为已禁用

1 个答案: