Contorno de fuente React Native / textShadow

Este enunciado fue analizado por expertos así se asegura la exactitud de nuestra esta sección.

Solución:

Sí es posible a través de las siguientes propiedades:

textShadowColor color
textShadowOffset ReactPropTypes.shape( width: ReactPropTypes.number, height: ReactPropTypes.number )
textShadowRadius ReactPropTypes.number

https://facebook.github.io/react-native/docs/text.html

Solicitud de extracción real completada: https://github.com/facebook/react-native/pull/4975

Hay al menos una forma de hacer que se vea así tanto en iOS como en Android:

Idea:

La idea es usar varias sombras en el objeto Texto. Podemos hacerlo envolviendo el componente de Texto con Vista y clonando el mismo objeto de Texto varias veces con diferentes sombras para que usen diferentes direcciones.

Implementación:

Aquí está el código para el componente contenedor:

import * as React from "react";
import  StyleSheet, View  from "react-native";
import  Children, cloneElement, isValidElement  from "react";

type Props = 
  children: any,
  color: string,
  stroke: number

const styles = StyleSheet.create(
  outline: 
    position: 'absolute'
  ,
);

export class TextStroke extends React.Component 
  createClones = (w: number, h: number, color?: string) => 
    const  children  = this.props;
    return Children.map(children, child => 
      if (isValidElement(child)) 
      return child;
    );
  

  render() 
    const color, stroke, children = this.props;
    const strokeW = stroke;
    const top = this.createClones(0, -strokeW * 1.2, color);
    const topLeft = this.createClones(-strokeW, -strokeW, color);
    const topRight = this.createClones(strokeW, -strokeW, color);
    const right = this.createClones(strokeW, 0, color);
    const bottom = this.createClones(0, strokeW, color);
    const bottomLeft = this.createClones(-strokeW, strokeW, color);
    const bottomRight = this.createClones(strokeW, strokeW, color);
    const left = this.createClones(-strokeW * 1.2, 0, color);

    return (
      
         left 
         right 
         bottom 
         top 
         topLeft 
         topRight 
         bottomLeft 
         bottomRight 
      
    );
  

Si el texto no es grande, también puede usar solo 4 direcciones en lugar de 8 para mejorar el rendimiento:

     topLeft 
     topRight 
     bottomLeft 
     bottomRight 

El uso:

   Sample 

También puede usar varios objetos de texto en el interior, ya que el contenedor los copia a todos.

Rendimiento:

Todavía no he comprobado el rendimiento de esta solución. Dado que estamos copiando texto tantas veces, tal vez no sea genial.

Cuestiones:

Hay que tener cuidado con el stroke valor. Con valores más altos, los bordes de las sombras serán visibles. Si realmente necesita un trazo más ancho, puede solucionarlo agregando más capas para cubrir diferentes direcciones de sombra.

Si te mola el tema, puedes dejar una división acerca de qué le añadirías a esta sección.

---

---

Utiliza Nuestro Buscador