Блог

Главная - Вопросы по программированию - Что не так с этой реализацией? Я не могу переопределить стиль

Что не так с этой реализацией? Я не могу переопределить стиль

#javascript #react-native

Вопрос:

Я хочу переопределить размер шрифта моего текста подзаголовка. Я получаю опору стиля в своем компоненте. Я проверил это с помощью консоли.войдите, и все в порядке. Но мои стили не реализуются. Что не так с моим кодом. Пожалуйста, помогите.

Вот компонент, называемый подзаголовком,

 function SubHeadingText({children, style}) {
  return (
    <Text style={[{fontSize: style.fontSize}, styles.textSubHeading]}>
      {children}
    </Text>
  );
}

const styles = StyleSheet.create({
  textSubHeading: {
    fontSize: 19,
    color: colors.black,
  },
});

и вот я передаю стиль

 <SubHeadingText style={{fontSize: 14}}>
    All fields are required to register with App.
</SubHeadingText>

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

1. Ваша стилевая опора неверна: вам нужно style={[ styles.textSubHeading, style ]}

2. @ChrisG В react native атрибут style может содержать несколько стилей, и они будут сведены к одному в порядке массива. См. Документы по стилю RN «Вы также можете передать массив стилей — последний стиль в массиве имеет приоритет, поэтому вы можете использовать его для наследования стилей».

3. @zero298 Только что обнаружил это, исправил мой комментарий

4. Порядок приоритета также упоминается прямо в документах: reactnative.dev/docs/style

5. @ChrisG также, просто для примечания, распространение того, что возвращается, на StyleSheet.create самом деле вызовет больше проблем, потому что в конечном итоге вы распространяете идентификатор таблицы стилей вместо фактических свойств. Это было источником большой путаницы всякий раз, когда я работал над своим последним проектом RN.

Ответ №1:

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

См. Документы в собственном стиле React:

Вы также можете передать массив стилей — последний стиль в массиве имеет приоритет, поэтому вы можете использовать его для наследования стилей

 function SubHeadingText({children, style}) {
  return (
    <Text style={[
      styles.textSubHeading, // Needs to be applied first so next line overrides
      {fontSize: style.fontSize}, // Will override styles.textSubHeading fontSize
    ]}>
      {children}
    </Text>
  );
}

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

1. Если весь ответ в основном представляет собой ссылку на документы, может быть, стоит подумать о том, чтобы не публиковать его в качестве ответа?

2. @ChrisG Я встречу тебя в середине и опубликую это как CW.

3. Спасибо за ответы, я увидел свою ошибку сразу после того, как опубликовал вопрос. Еще раз спасибо.

Метки: