如何在文本 ReactNative 中包含 TouchableOpacity

IT技术 reactjs react-native text view touchableopacity
2021-03-28 04:54:57

嗨,我想将 TouchableOpacity 包裹在一个文本中,因为我想让一些文本可点击。当我将所有内容都包裹在 Text 中时,它看起来很完美,这就是我想要的样子。

 <Text 
   style={{color: colors.black,
           fontSize: 12,
           fontWeight: 'normal',
           marginTop: 10,
           lineHeight: 18}}>
      {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          {/* <TouchableOpacity onPress={ this.termsOfService }>
            <Text style={{color: colors.primaryColor,
                          fontSize: 12,
                          fontWeight: 'normal',}}>
              {strings.loginPrivacyTermsCondFour}
            </Text>
          </TouchableOpacity> */}
      </Text>

当我添加 TouchableOpacity 时它不起作用。

我尝试在视图中添加它然后它工作正常,我能够添加 TouchableOpacity 但从 UI 的角度来看,它们没有正确对齐。

这是仅使用 Text 显示的屏幕截图,其中 TouchableOpacity 不起作用,第二位位于 TouchableOpacity 起作用但看起来不正确的视图中。

在此处输入图片说明

如何让它看起来像第一位。任何建议非常感谢。

谢谢

1个回答

您可以嵌套 Text 元素,并在要使其可按下(链接)的每个嵌套 Text 元素上分配 onPress 处理程序。

见下文。有一个外部文本元素,里面是另一个文本元素,子文本元素有一个 onPress 处理程序,如果你运行它,你会看到“但是这是!” 按下时执行 onPress 处理程序,不需要 Touchable* 元素。

<Text style={{color: '#000'}}> 
     This part is not clickable 
     <Text onPress={() =>
           {alert('but this is');}}
           style={{color: '#00F'}}>
     But this is!
     </Text> 
     but this isn't
</Text>

您可以制作一种样式以放置在具有/a onPress 处理程序的任何 Text 元素上,以使它们具有不同的颜色,如您的示例图像中所示。

请注意,这很像 HTML,例如,您可以在 ap 元素中嵌套锚标记;

<p>
    This part is not clickable 
    <a href="https://google.com"> but this is</a>
    but this isn't
</p>

在你的例子中,它会是这样的(未经测试):

<Text style={{color: colors.black,
              fontSize: 12,
              fontWeight: 'normal', 
              marginTop: 10,
              lineHeight: 18}}>
        {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor, 
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          <Text onPress={ this.termsOfService } 
                style={{color: colors.primaryColor,
                        fontSize: 12, 
                        fontWeight: 'normal'}}>
              {strings.loginPrivacyTermsCondFour}
          </Text> 
      </Text>

为了回应您的评论,这里有一个在单击链接后更改颜色的弹出示例。

简而言之,我在状态上添加了一个布尔字段,一旦文本被按下,我就会将该状态变量更新为真,然后文本元素的样式值具有一个三元运算符,它决定了呈现文本的颜色,在在我的示例中,如果尚未按下它,它将显示为 'colors.primaryColor',一旦单击它,它将显示为 'red'。

class Foo extends Component {

    constructor (props) {
        super(props);

        this.state = {
            privacyClicked: false //Track if they have clicked privacy
        };
    }

    render () {

        return (
             <Text onPress={ () =>{
    this.setState({
        privacyClicked: true
    });
}} style={{color: (this.state.privacyClicked ? colors.primaryColor : 'red'), 
           fontSize: 12,
           fontWeight: 'normal'}}>
    {strings.loginPrivacyTermsCondFour}
</Text> 
        );
    }
}

PS,示例文本的格式不是很好。

你好李,谢谢你,是的,onPress on text 是我需要的解决方案,非常简单,谢谢。但是有一件棘手的事情,您能建议如何在单击时更改文本的颜色吗?这样它看起来就像被点击一样
2021-05-25 04:54:57
在我的回答中给你一个例子,如果这有帮助,请投票并接受答案:)
2021-05-31 04:54:57
虽然这在 iOS 上效果很好,但在 Android 上按下时没有突出显示或不透明度变化。有什么建议?
2021-05-31 04:54:57
这似乎不适用于屏幕阅读器。它只是将所有内容读取为纯文本而不是可按下
2021-06-04 04:54:57
在这种情况下,accessably 无法正常工作。它被识别为画外音中的一个元素
2021-06-09 04:54:57