时间戳

首页 > 解决方案 > 如何使用 react-native-paper 主题设置禁用按钮的颜色？

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

问题描述

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

标签： react-nativematerial-designreact-native-paper

解决方案

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

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

推荐阅读