如何在文本 ReactNative 中包含 TouchableOpacity

Question

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

 <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 不起作用，第二位在视图中，其中 TouchableOpacity 起作用但看起来不正确。

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

谢谢 R

Answer 1

您可以嵌套 Text 元素，并为每个要使其可按下的嵌套 Text 元素分配 onPress 处理程序（link）。

见下文。有一个外部文本元素，里面是另一个文本元素，子文本元素有一个 onPress 处理程序，如果你运行这个，你会看到 'But this is!' 当你按下它时执行 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>

您可以将样式放置在具有 the/a onPress 处理程序的任何文本元素上，使它们具有不同的颜色，如您的示例图像中所示。

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

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

为了回应您的评论，这里是点击 link 后更改颜色的示例。

简而言之，我在状态上添加了一个布尔字段，一旦文本被按下，我将该状态变量更新为 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，示例文本的格式不太好。

如何在文本 ReactNative 中包含 TouchableOpacity

How to include TouchableOpacity within Text ReactNative

text

view

reactjs

react-native

touchableopacity