Как установить цвет отключенной кнопки, используя тему «Реагирующая бумага»? - PullRequest
Новая
       84

Как установить цвет отключенной кнопки, используя тему «Реагирующая бумага»?

0 голосов
/ 12 апреля 2020

Реактивная бумага Документы предполагают, что вы можете установить цвет отключенной кнопки с помощью темы, но этот код не работает: 

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 цвет работает однако. Как изменить цвет кнопки, когда она отключена?

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Не используйте отключенные реквизиты, ваша кнопка всегда будет серой, если вы хотите использовать нужный цвет для отключенного режима, сделайте это следующим образом: 

<Button
  loading={submittedPhoneNumber ? true : false}
  mode="contained"
  onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
  color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
  Continue
</Button>
0 голосов
/ 18 апреля 2020

Из этого Выпуск 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' }}>
...