Tengo la siguiente estructura de componentes que se representa:
<Text> Hello <UsernameWrapper>@gaberocksall</UsernameWrapper>! Nice to meet you. </Text> Me gustaría crear un componente personalizado que coloque automáticamente @username s en un UsernameWrapper , como este (y debería representarse de manera idéntica al fragmento anterior):
<AutoUsernameText>Hello @gaberocksall! Nice to meet you.</AutoUsernameText>O, incluso de manera más general, algo similar a:
<MagicWrapper wrap={/@\w+/gi} wrapper={UsernameWrapper}> Hello @gaberocksall! Nice to meet you. </MagicWrapper> ¿Cómo haría para crear el componente MagicWrapper en React Native?
Podríamos simplemente crear un nuevo componente donde pasemos el nombre de username como accesorio. En mi opinión, ese es el camino a seguir en react-native. Aquí hay una implementación rápida.
export const AutoUsernameText = (props) => { return ( <Text> Hello <UsernameWrapper>@{props.name}</UsernameWrapper>! Nice to meet you. </Text> ) }Entonces, podemos usarlo de la siguiente manera.
const SomeOtherScreen = () => { return ( <AutoUsernameText name="gaberocksall" /> ) } Tenga en cuenta que esta solución depende de cómo se implemente realmente UsernameWrapper . Como no lo sé, asumo cadenas simples aquí.
Si realmente quieres pasarlo como un niño, por ejemplo.
<MagicWrapper>Hello @gaberocksal! Nice to meet you.</MagicWrapper> entonces AutoUsernameText necesita analizar sus elementos secundarios y devolver el componente que desea en su lugar. Esto es posible, aunque no veo ninguna buena razón por la que uno deba hacerlo. Abre muchas trampas que no son fáciles de evitar.
Sin embargo, podemos lograr esto de la siguiente manera, asumiendo que el elemento secundario es una cadena simple que usa expresiones regulares JS simples.
export const MagicWrapper = (props) => { // Notice that I do not guard here for potential errors ... // props.children could be anything ... const child = props.children const name = child.match(/@\S+?(?=!)/g) const content = child.split(name) return ( <Text> {content[0]}<UsernameWrapper>{name}</UsernameWrapper>{content[1]} </Text> ) }Para dividir un patrón Regex específico como nombre de usuario, URL, etc., puede usar el paquete react-native-parsed-text . Por ejemplo, lo ayudará a cambiar el color del patrón Regex (también definir estilos personalizados) o definir la función onPress para hacer algunas cosas. Espero que sea de utilidad. página de github de texto analizado nativo de reacción.