Color global de "Texto" y color de texto "TextInput"

Comencé a trabajar con react-native hace unos días y después de una extensa búsqueda no pude encontrar respuestas para 2 preguntas (sencillas):

  1. ¿Cómo puedo cambiar el color de TODOS los componentes de texto en react-native? ¿Cuáles son las mejores prácticas? Creación de un componente de texto propio con estilo y reutilización en todas partes?

  2. Cambiar el color de texto predeterminado de TextInput . Me las arreglé para cambiar el color del marcador de posición, y también el color de subrayado en android, pero no puedo encontrar nada sobre cómo cambiar el color de texto de entrada (se queda negro).

  3. ¿Puedo cambiar el color de fuente / texto para todo de todos modos? Esta opción parece faltar.

Gracias por cualquier ayuda y alegrías

Para obtener un estilo coherente de elementos de Text (o cualquier otro elemento básico utilizado en una aplicación React Native), nuestro equipo ha comenzado a crear una biblioteca de componentes para nuestra aplicación que coinciden con los estilos y la denominación de la guía de estilo elaborada por nuestro diseño equipo.

Por ejemplo su componente del texto parecería esto:

 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', }; 

Crear su componente de texto de esta manera puede definir qué estilos están disponibles y mostrar a los desarrolladores advertencia si no utilizan un estilo válido con las definiciones PropTypes .

También queríamos que los componentes de esta biblioteca pudieran ser fácilmente referenciados desde cualquier archivo en el que los necesitaran, por lo que le dimos al archivo de la biblioteca principal un nombre con el comentario provideModule que algunos de los componentes internos React Native usan.

El archivo de la biblioteca principal se parece a esto.

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

Entonces sólo tiene que importarlo en cualquier archivo de componente que necesite el componente de texto personalizado.

 import { Text } from 'AppNameLibrary'; 

Esa es una forma de hacerlo. No estoy seguro si es la mejor manera, pero es una buena manera que nuestro equipo ha llegado a construir componentes para que estén diseñados consistentemente de una manera que coincida con nuestra guía de estilo.

En cuanto a cambiar el color de texto del componente Android TextInput, sólo asignar un color: 'orange' como un estilo, cambió el texto a naranja para mí. Estamos usando RN 0,28 en este punto.

Tiene dos opciones:

  1. Cree su propio componente de Text con el estilo predeterminado que desee y vuelva a usarlo en todas partes. (Como usted mencionó)
  2. Cree un objeto StyleSheet accesible globalmente y utilícelo en todos los componentes Text .

Creo que # 1 es la mejor opción. A pesar de la sobrecarga de intercambiar todos sus <Text/> fuera, ofrece una mayor flexibilidad en el futuro de su proyecto.

No hay forma de cambiar todos los componentes de Text existentes a menos que cree una rama de la biblioteca reactiva y modifique el código fuente para Text . No recomiendo este método.

  • Reaccione errorTimeout nativo que consigue lista del dispositivo. Cuando se ejecuta hola mundo en ubuntu
  • React Native - initialProperties Android
  • Las referencias a getCurrentActivity hacen imposible la creación de un InputMethodService en Android
  • Reaccionar los errores de Android de Twilio nativo
  • React-nativo de Android WebView manejar clic en Url antes de cargar
  • Cajón de navegación en React-Native
  • Exponer fragmento en React Native Android ViewManager
  • Reaccionar-Nativo Android PushNotifications
  • ¿Cómo configurar la depuración en Visual Studio Code para React Native?
  • Solicitud de ubicación agotada en el emulador de Android con React-Native
  • ¿Cómo puedo mostrar el mapa de ruta de CurrentLocation a algún destino (algunos dirección) Ubicación
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.