Какая польза от таблицы стилей в реагирующем - PullRequest
Новая
       5

Какая польза от таблицы стилей в реагирующем

0 голосов
/ 13 октября 2019

Я создаю приложение для Android с использованием собственного кода.

часть моего JSX включает в себя 

<Text style={{ color: "red" }}> Styled using style prop !! </Text>
<Text style={styles.colorRed}> Styled uisng StyleSheet !!</Text>

и 

const styles = StyleSheet.create({
  colorRed: {
    color: "red"
  }
})

TextКомпонент, кажется, отображает тот же стиль (по крайней мере, на платформе Android),

docs предлагает использовать модуль StyleSheet. У меня вопрос, когда мне использовать модуль StyleSheet?

Ответы [ 2 ]

2 голосов
/ 13 октября 2019

Вы должны использовать таблицу стилей поверх встроенных стилей.

Преимущества

  • Отодвигая стили от функции рендеринга, вы облегчаете понимание кода.

  • Наименование стилей - хороший способ добавить смысл к компонентам низкого уровня
    в функции рендеринга.

  • Таблица стилей отправляется только один раз по мостув отличие от обычного объекта стиля внутри render ().

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

First one - это inline styleling.

Пример 

<Text style={{ color: "red" }}> Styled using style prop !! </Text>

Второй каждый использует StyleSheet, вы создаете объект стиля и ссылаетесь на каждый стильиндивидуально. Это приводит к отделению стилей от метода рендеринга и помогает организовать код.

Пример 

    <Text style={styles.colorRed}> Styled uisng StyleSheet !!</Text>
    // initialize stylesheet
    const styles = StyleSheet.create({
      colorRed: {
        color: "red"
      }
})

Когда следует использовать встроенные стили Например, если у вас есть базовая таблица стилей и у вас есть различные компоненты с одинаковым стилем, но с одним или двумя изменениями свойств, вы можете использовать встроенный стиль

Пример 

    <Text style={[CommonStyles.textLightGrey, { alignSelf: 'flex-end' }]} >Balance</Text>
    <Text style={[CommonStyles.textLightGrey, { alignSelf: 'center' }]} >Balance</Text>
// It is my common or base stylesheet
export default StyleSheet.create({
       textLightGrey: {
        fontSize: 12,
        color: COLORS.lightgrey
    },

});
0 голосов
/ 13 октября 2019

Да, вы должны предпочесть таблицу стилей, а не встроенный стиль. Когда вы создаете стиль в таблице стилей, вы получаете соответствующие ошибки на вашем эмуляторе / устройстве напрямую, так что вы будете знать свои ошибки (если они есть), в то время как ваш код может испортиться во встроенном стиле!

...