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.

  • Reaccionar Nativo en Android, falla la llamada ajax con recuperación
  • Depuración Reaccionar Nativo sobre adb tcpip
  • Reacciona Nativo y Twilio en Android
  • React Native: Determine el número de líneas del componente Text
  • La llamada de Twilio no funciona en iOS y Android en react-native
  • Reaccionar datos de almacenamiento nativos entre sesiones
  • Reaccionar la integración nativa con el fallo de la aplicación existente: "No se puede encontrar la variable: __fbBatchedBridge"
  • ¿Puedo probar / desarrollar una aplicación sin tener Xcode?
  • No se puede ejecutar "ANY" reaccionar proyecto ejemplo nativo
  • ¿Cómo integrar twilio en reaccionar nativo para android?
  • ¿Cómo puedo configurar la finalización de código java para un proyecto nativo de reactivar en intellij?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.