Как писать поддерживаемые стили в React Native

(Это будет коротко)

В Gamezop недавно мы начали писать часть редизайна нашего приложения на React Native. Одна из первых возникших проблем заключалась в следующем:

Как эффективно писать наши стили React (Native)?

Проблема

Наше приложение использует собственный шрифт в большинстве представлений, которые у нас есть. Поэтому для каждого визуализированного компонента Text нам пришлось написать несколько правил стиля, например

//HelloTitle.js
const HelloTitle = ({ title }) => (
  <Text style={styles.title}>Hello { title }</Text>
)
const styles = StyleSheet.create({
  title: {
    ...Platform.select({
      ios: {
        fontFamily: 'Gamezop',
      },
      android: {
        fontFamily: 'gamezop',
      }
    })
  }
})

Повторение одного и того же кода повсюду - плохая идея.

Хакерский путь

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

//styles.js
export default StyleSheet.create({
  title: {
    ...Platform.select({
      ios: {
        fontFamily: 'Gamezop',
      },
      android: {
        fontFamily: 'gamezop',
      }
    })
  }
})

Тогда используйте это как

//HelloTitle.js
import Styles from './styles.js'
const HelloTitle = ({ title }) => (
  <Text style={Styles.title}>Hello { title }</Text>
)

Но этот подход, похоже, не соответствовал подходу React, ему не хватало возможности компоновки.

Решение

Компоненты высшего порядка / Пользовательские компоненты

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

//GzpText.js
const GzpText = props => (
  <Text {...props} style={[styles.font, props.style]}>
    {props.children}
  </Text>
)
const styles = StyleSheet.create({
  font: {
    ...Platform.select({
      ios: {
        fontFamily: 'Gamezop',
      },
      android: {
        fontFamily: 'gamezop',
      }
    })
  }
})
export default GzpText

Здесь GzpText обертывает собственный компонент Text, чтобы получить настраиваемый компонент Text, который оборачивает свое дочернее содержимое в компоненты Text с предварительно примененными нашими стилями.

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

//HelloTitle.js
import GzpText from './GzpText'
const HelloTitle = ({ title }) => (
  <GzpText>Hello { title }</GzpText>
)

Некоторые последующие материалы о компонентах более высокого порядка и о том, как они заменяют миксины с помощью композиции.

Обратная связь? Твитни меня!