我是 ReactNative 的新手。在应用程序中,我想在文本中添加指向文本的链接。如图所示,链接所链接的紫色文字略高于普通文字。无论我尝试什么,我都无法将此文本与下面的文本对齐。我想做响应式设计,所以我要写的代码在每个设备上看起来应该是一样的。你能帮我解决这个问题吗?
代码:
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",
}
})
最佳答案
您可以将一个 Text 元素直接嵌套在另一个 Text 元素中,而无需使用 TouchableOpacity。嵌套的文本元素可以有一个 onPress 函数来处理链接以及您需要的任何颜色变化。
<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>
我找到了这个解决方案 here , 顺便一提。该答案更详细地介绍了如何在按下后更改颜色等。
关于javascript - 在文本中添加指向文本的链接 - React Native,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69163960/