如何使用react-native-paper主题设置禁用按钮的颜色?

kqqjbcuj  于 2023-08-07  发布在  React
关注(0)|答案(5)|浏览(191)

react-native-paper docs建议您可以使用主题设置禁用按钮的颜色,但以下代码不起作用:

export const buttonTheme = {
  colors: {
    primary: COL_BASE_YELLOW,
    disabled: COL_DARK_HIGHLIGHT,
  },
}

<Button
  loading={submittedPhoneNumber ? true : false}
  mode="contained"
  onPress={() => handleSubmitPhoneNumber(phoneNumber)}
  theme={buttonTheme}
  disabled={phoneNumber.length < 5 ? true : false}>
  Continue
</Button>

字符串
primary颜色可以工作。禁用按钮时如何更改按钮的颜色?

o4hqfura

o4hqfura1#

不要使用禁用的 prop ,它会让你的按钮总是灰色的,如果你想使用你想要的颜色为禁用模式,这样做:

<Button
  loading={submittedPhoneNumber ? true : false}
  mode="contained"
  onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
  color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
  Continue
</Button>

字符串

gr8qqesn

gr8qqesn2#

Github issue
如果包含按钮,则文本取决于按钮的背景颜色,该背景颜色基于背景颜色的深浅而自动确定。无论主题是黑暗或不影响它。
这是期望的行为。我们不希望在浅色背景上显示白色文本,因为您有一个深色主题,否则文本将没有足够的对比度,并且难以辨认。
将主题更改为深色会更改禁用按钮的颜色,正如我测试的那样。除此之外,我认为如果你使用react-native-paper是不可能的。作者已经决定根据某些东西自动设置按钮的颜色和背景颜色,但他的语言是 * 不清楚 *。
但是,您可以直接为labelStyle提供prop按钮,并且可以使用这种风格的条件。

<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>

字符串
或者,

[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>

flvlnr44

flvlnr443#

我可能会迟到,但我的解决办法是:

<Button 
   id="save-phonenumber"
   color="darkColor">
   onClick={doSomething}
   disabled={phoneNumber.length < 5 ? true : false}>
<Button/>

字符串
Css文件中,您可以添加

Button#save-phonenumber[disabled] {
  background: "fadedColor"
}


使用这种方法的好处是,在禁用按钮时,您不需要另外禁用单击效果。

s5a0g9ez

s5a0g9ez4#

如果你现在关心明暗主题,那么你可以像这样实现你的目标--我建议在Paper Button的顶部创建你自己的Button Component。

// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
  {children}
</PaperButton>

// Using component...
<MyButton disabled={disabled}>
  Click Me!
</MyButton>

字符串

gcmastyq

gcmastyq5#

您可以通过将backgroundColor属性传递给样式属性来更改颜色。

<Button
  mode="contained"
  color={colors.backgroundYellow}
  style={{ backgroundColor: colors.backgroundYellow }}
  loading={isLoading}
  disabled={isLoading}>
    Button
</Button>

字符串

相关问题