如何在Text ReactNative中包含TouchableOpacity

Question

嗨,我想在文本中包含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角度来看,它们没有正确对齐.

以下是仅显示文本的屏幕截图,其中TouchableOpacity不起作用,第二位位于View中,其中TouchableOpacity起作用但看起来不正确.

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

谢谢R

Answer 1

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

见下文.有一个外部文本元素,而inside是另一个文本元素,子文本元素有一个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>

在回复您的评论时,这是在点击链接后更改颜色的简要示例.

简而言之,我在状态上添加了一个布尔字段,一旦文本被按下,我将该状态变量更新为true,然后文本元素的样式值有一个三元运算符,它决定了呈现文本的颜色,我的例子如果没有按下它将显示为'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,示例Text上的格式不是很好.