在文本中添加文本链接 - React Native

Question

我是 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",
      }
    })

Answer 1

您可以将一个 Text 元素直接嵌套在另一个 Text 元素中，而无需使用 TouchableOpacity。嵌套的 Text 元素可以有一个 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>

顺便说一下，我在这里找到了这个解决方案。该答案更详细地介绍了如何在按下后更改颜色等。