Цвет текста «Текст» и цвет текста «TextInput»

Question

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

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

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

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

Спасибо за любую помощь и веселит

Answer 1

Чтобы получить последовательный стиль элементов 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'; 

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

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

Answer 2

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

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

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

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