Блог

Вместо того, чтобы стилизовать каждый элемент по отдельности, скажем, цвет фона многих элементов на разных страницах / компонентах в моих приложениях react native…

Какова наилучшая практика глобального стиля для общих элементов? Эффективный способ. Спасибо, ребята.

PS: Я использую функцию вместо класса, и я новичок в этом react-native.

Если вы не хотите использовать наследование классов, вы можете написать HOC, который может применять стили к своему дочернему элементу. Внутри дочернего компонента наследуйте требуемые стили свойств от родительского. Базовый стиль — это hoc, поддерживающий определения css для всех компонентов. Для вашего компонента, который должен наследоваться, нам нужно обернуть их базовым стилем, предоставив необходимую поддержку стиля.

 function ComponentInheritingStyle() {
  return (
      <BaseStyle style={styles.button}>
          {...this.props.children}
     </BaseStyle>
     );
   }

export const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    fontSize: '12',
    borderRadius: '4',
  },
  div: {
    border: '2px',
    borderColor: 'lightblue',
    padding: 10,
    marginBottom: 10
  }
})
  

вы можете прочитать ссылку ниже для большей ясности, через class.
Наследование в React JS

Стиль React native основан на объектах js. Итак, вы можете создавать свои объекты «стиля» в отдельных файлах js и импортировать эти файлы в свои компоненты react. Поскольку иногда хорошей идеей является изменение стиля объекта на основе значений переменной состояния, было бы здорово иметь необходимые значения поблизости для «быстрого понимания». Все зависит от того, как вы организуете свой код. Например, следующий код (из собственного руководства) может быть объявлен в отдельном файле js:

 export const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      button: {
        alignItems: 'center',
        backgroundColor: '#DDDDDD',
        padding: 10,
        marginBottom: 10
      }
    })
  

и более поздний импорт с помощью команды import:

 import {styles} from '.... path to file where you placed styles code ... "