如何在文本 ReactNative 中包含 TouchableOpacity [英] How to include TouchableOpacity within Text ReactNative

问题描述

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

Hi I want to wrap TouchableOpacity within a Text as I want to make some of the text clickable. When I wrap everything within a Text it looks perfect and that is how I want it to look.

 <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 时它不起作用.

When I add TouchableOpacity it does not work.

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

I tried adding it in a view then it works fine and I am able to add TouchableOpacity but from UI perspective, they are not aligned properly.

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

Here is the screenshot showing just with Text where TouchableOpacity does not work and second bit is within the View where TouchableOpacity does work but does not look right.

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

How can make it look right as the first bit. any suggestions much appreciated.

谢谢R

推荐答案

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

You can nest Text elements, and assign onPress handlers on each nested Text element you want to make pressable (a link).

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

See below. There is an outer text element, and inside is another text element, the child text element has an onPress handler, if you run this, you'll see 'But this is!' executes the onPress handler when you press it, no need for a Touchable* element.

<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 元素上，使它们具有不同的颜色，如您的示例图像所示.

You could make a style to place on any Text elements which have the/a onPress handler, to make them a different colour, as in your example image.

注意，这很像 HTML，例如，您可以在 p 元素中嵌套锚标记；

Note, this is much like HTML, where you would nest anchor tags inside a p element, for example;

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

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

In your example, it'd be something like this (untested):

<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>

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

In response to your comment, here's a knock-up example of changing the colour, after the link has been clicked.

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

In short, I've added a boolean field on state, once the text gets pressed, I update that state variable to be true, the text element's style value then has a ternary operator, which decides what colour to render the text in, in my example it will show as 'colors.primaryColor' if it's not been pressed yet, and 'red' once it has been clicked.

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，示例文本的格式不太好.

PS, formatting on the example Text isn't great.

这篇关于如何在文本 ReactNative 中包含 TouchableOpacity的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！