Глобальный цвет "Текст" и цвет текста "TextInput"

Я начал работать с реактивной системой несколько дней назад, и после продолжительного поиска не смог найти ответы на 2 (простых?) Вопроса:

  1. Как я могу изменить цвет ВСЕХ текстовых компонентов в реактивном? Каковы лучшие практики? Создание собственного компонента Text со стилем и повторное использование его везде?

  2. Изменить цвет текста по умолчанию TextInput. Мне удалось изменить цвет заполнителя, а также цвет подчеркивания в Android, но я не могу найти ничего о том, как изменить цвет входного текста (остается черным).

  3. Можно ли как-нибудь изменить шрифт / цвет текста для всего? Эта опция, кажется, отсутствует.

Спасибо за любую помощь и ура

Источник

3 ответа

Решение

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

Например, ваш текстовый компонент будет выглядеть так:

import React, { PropTypes, Component } from 'react';
import ReactNative from 'react-native';    

export default class Text extends Component {

  getProps() {
    const { fontSize, fontWeight } = this.props;
    return {
      fontSize,
      fontWeight,
    };
  }

  render() {
    return (
      <ReactNative.Text {...this.getProps()}>{this.props.children}</ReactNative.Text>
    );
  }
}

Text.propTypes = {
  fontSize: PropTypes.oneOf([
    25,
    20,
    15,
  ]),
  fontWeight: PropTypes.oneOf([
    'normal',
    'bold',
  ]),
};

Text.defaultProps = {
  fontSize: 20,
  fontWeight: 'normal',
};

Создав свой текстовый компонент таким образом, вы можете определить, какие стили доступны, и показать разработчикам предупреждение, если они не используют действительный стиль с PropTypes определения.

Мы также хотели, чтобы компоненты в этой библиотеке можно было легко ссылаться из любого файла, в котором они были нужны, и поэтому мы дали файлу основной библиотеки имя с providesModule отметьте, что некоторые из внутренних компонентов React Native используют.

Основной файл библиотеки выглядит примерно так.

/**
 * @providesModule AppNameLibrary
 */

module.exports = {
    get Text() { return require('./Text').default; },
};

Затем вам просто нужно импортировать его в любой файл компонента, который вам нужен.

import { Text } from 'AppNameLibrary';

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

Что касается изменения цвета текста компонента Android TextInput, просто назначив color: 'orange' как стиль, изменил текст на оранжевый для меня. Мы используем RN 0,28 на данный момент.

Источник

Вы можете установить глобальный цвет текста в Android

Шаг 1. Сначала откройтеstyles.xmlфайл. расположение файла/android/app/src/main/res/values/styles.xml

Шаг 2. Добавьте эту строку внутри тега стиля.<item name="android:textColor">{Set your color}</item>

Так

       <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
 </style>
Источник

У вас есть два варианта:

  1. Создайте свой собственный Text компонент со стилем по умолчанию, который вы хотите, и использовать его везде. (Как вы упомянули)
  2. Создать StyleSheet объект, который доступен во всем мире и использовать его в каждом Text составная часть.

Я думаю, что №1 - лучший вариант. Несмотря на накладные расходы по обмену всеми вашими <Text/> он предлагает большую гибкость в будущем вашего проекта.

Нет возможности изменить все существующие Text компоненты, если вы не создаете ветвь react-native библиотека и изменить исходный код для Text, Я не рекомендую этот метод.

Источник
Другие вопросы по тегам