0
376
VistasAgregar un enlace a un texto dentro del texto - React Native
Soy nuevo en ReactNative. En la aplicación, quiero agregar un enlace a un texto dentro del texto. Como se ve en la foto, el texto morado al que está vinculado el enlace está ligeramente por encima del texto normal. No importa lo que intenté, no pude alinear este texto con el texto a continuación. Quiero hacer un diseño receptivo, por lo que el código que voy a escribir debe tener el mismo aspecto en todos los dispositivos. ¿Me puede ayudar con esto?
foto de la aplicación: 
Códigos:
import React from 'react' import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' import { Dimensions } from "react-native" const units = { width: Dimensions.get("window").width, height: Dimensions.get("window").height, } const VideoPlayback = () => { return ( < View style = { styles.container } > < View style = { styles.advertContainer } > < View style = { styles.adverPicture } > < /View> < View style = { styles.textContainer } > < Text > Everyone is watching this so they can learn math. < TouchableOpacity onPress = { () => console.log('open advert') } > { < Text style = { styles.advertLinkText } > It is your turn < /Text>} < / TouchableOpacity > < /Text> < / View > < /View> < / View > ) } export default VideoPlayback const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#FFFFFF", }, advertContainer: { width: units.width, height: units.height / 8.78, backgroundColor: "#F5F5F5", marginTop: units.height / 20, borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#E9E9E9', alignItems: 'center', flexDirection: 'row' }, adverPicture: { width: units.width / 3.02, height: units.height / 11.25, backgroundColor: 'black', marginLeft: units.width / 45 }, textContainer: { width: units.width / 1.69, marginLeft: units.width / 30, }, advertLinkText: { color: "#957DAD", } })3 Respuestas
Responde la pregunta0
Puede anidar un elemento de texto dentro de otro elemento de texto directamente, sin usar TouchableOpacity. El elemento de texto anidado puede tener una función onPress que maneja la vinculación, así como cualquier cambio de color que necesite.
<View style={styles.textContainer}> <Text> Everyone is watching this so they can learn math. <Text style={styles.advertLinkText} onPress={() => console.log('open advert')}> {' '} It is your turn </Text> </Text> </View>Encontré esta solución aquí , por cierto. Esa respuesta entra en más detalles sobre cómo puede cambiar el color una vez presionado, etc.
0
Agregue la propiedad margin: "auto" a su anuncioLinkText.
Aquí hay un ejemplo de trabajo para su referencia. 
Probé con un tamaño de dispositivo de 494 x 308 px.
0
este paquete te ayudará a conseguir lo que buscas:
https://www.npmjs.com/package/react-native-text-link
<TextLink links={[ { text: 'It is your turn', onPress: () => console.log('do whatever you need'), } ]} > Everyone is watching this so they can learn math. It is your turn </TextLink>