2

react-native-paper文档建议您可以使用主题设置禁用按钮的颜色，但此代码不起作用：

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颜色有效。禁用时如何更改按钮的颜色？

4

4 回答 4

6

不要使用禁用的道具，它总是会让你的按钮变灰，如果你想使用你想要的颜色来禁用模式，这样做：

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

于 2020-04-23T09:53:07.960 回答
1

从这个Github 问题：

包含按钮的文本取决于按钮的背景颜色，这是根据背景颜色自动确定的，是浅色还是深色。无论主题是否黑暗，都不会影响它。

这是期望的行为。我们不想在浅色背景上显示白色文本，因为您有一个深色主题，否则文本将没有足够的对比度并且难以辨认。

正如我测试的那样，将主题更改为深色会更改禁用按钮的颜色。除此之外，我认为如果您使用react-native-paper. 作者决定根据某些东西自动设置按钮的颜色和背景颜色，但他的语言不清楚。

但是，您可以labelStyle直接给按钮一个道具，并且您可以在该样式中使用条件。

 <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' }}>
于 2020-04-18T10:30:39.723 回答
0

我可能迟到了，但这是我的解决方案：

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

在您Css的文件中，您可以添加

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

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

于 2021-11-05T20:30:22.897 回答
0

如果您目前关心浅色和深色主题，那么您可以像这样实现您的目标 - 我建议在 Paper Button 顶部创建自己的 Button 组件。

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


// Using component...
<MyButton disabled={disabled}>
  Click Me!
</MyButton>
于 2022-03-05T02:57:55.620 回答