Блог

Главная - Вопросы по программированию - Как избежать обновления стилей кнопок очистки / контура при смене тем

Как избежать обновления стилей кнопок очистки / контура при смене тем

#react-native #react-native-elements

#react-native #react-native-elements

Вопрос:

Рассмотрим такую простую страницу, на которой используется кнопка из react-native-elements@1.1.0:

 class App extends React.Component {
  render() {
    const theme = {
     // Use default
    };
    return (
      <ThemeProvider theme={theme}>
        <View style={styles.container}>
          <Button title="normal"/>
          <Button title="clear" type="clear"/>
          <Button title="outline" type="outline"/>
        </View>
      </ThemeProvider>
    )
  }
}

Изначально это выглядит примерно так.

введите описание изображения здесь

Затем я собираюсь установить здесь свою пользовательскую тему.

 class App extends React.Component {
  render() {
    const theme = {
      Button: {
        buttonStyle: {
          backgroundColor: 'green',
        },
      },
    };
    ...
  }
}

Этот результат:

введите описание изображения здесь

Однако я хочу сохранить стили фона для типа очистки / контура. но эта система тем, похоже, не допускает такой настройки.

Кто-нибудь знает, как я могу избежать этой проблемы при использовании системы тем? или любой обходной путь.

Спасибо.

Ответ №1:

Вы можете создать тему со всеми необходимыми свойствами, а затем использовать оператор spread, чтобы добавить тему только к тем кнопкам, которые вы хотите.

 class App extends React.Component {
  render() {
    const theme = {
        buttonStyle: {
          backgroundColor: 'green',
        },
    };
    ...
    <Button title="normal" {...theme}/>
    <Button title="clear" type="clear"/>
    <Button title="outline" type="outline"/>
  }
}

Комментарии:

1. Спасибо. почему я не заметил такого простого способа!!

2. Это плохое решение, потому что вам нужно было бы определить или импортировать тему во все места, где вы используете кнопку для ее распространения.

3. @hallmanitor этот ответ очень старый, поэтому я не уверен в нем. Я понял, что OP хотел изменить тему только для одной конкретной кнопки, а не для всех. Создание контекста темы намного лучше, если оно предназначено для всех кнопок, но если это только для одного конкретного случая, вы могли бы просто передать ему новый объект. Но я могу согласиться, этот ответ очень старый, и код заставляет меня чувствовать себя странно и выглядит не очень хорошо.

Ответ №2:

Единственный способ, которым я смог добиться этого, — добавить ButtonStyle к конкретным кнопкам clear, к которым я не хотел, чтобы применялись стили.

 
const theme = {
    Button: {
      buttonStyle: { backgroundColor: primaryColor },
    },
  };

<ThemeProvider theme={theme}>
{your app}
</ThemeProvider>

...

<Button
  type='clear'
  buttonStyle={{ backgroundColor: undefined }}
  titleStyle={{ color: primaryColor }}>
</Button>

Я закончил создание собственного компонента, в который была включена кнопка очистки из react-native-elements , чтобы внести это изменение только один раз.