如何在 Text 中的 Text 周围包裹一个 TouchableOpacity? [英] How can I wrap a TouchableOpacity around Text within Text?

问题描述

我正在尝试执行 React Native 不喜欢的类似以下内容.

我想将可点击文本包裹在一个 TouchableOpacity 中，并使用它自己的样式.

通过将其包装在父 Text 组件中，所有文本都完美地并排放置.但是，我不能将 TouchableOpacity 放在 Text 组件中.

<查看><文字><Text>你好，我的名字是</Text><TouchableOpacity onPress={this.openProfile}><Text style={styles.clickable}>{ name }</Text></TouchableOpacity><Text>，我目前在 </Text> 工作.<TouchableOpacity onPress={this.openCompanyPage}><Text style={styles.clickable}>{ company }</Text></TouchableOpacity></文本></查看>

我收到错误:Views nested in a ;必须有宽度和高度.我无法设置这些度量，因为我希望它们是动态的并且依赖于内容.

例如，name 可以是 John Smith 或

解决方案

Dan.您需要通过将所有内容包装在 标记中并相应地添加样式来实现这一点.

试试这个:

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}><Text>你好，我的名字是</Text><TouchableOpacity><Text style={{color: 'red'}}>Dan, </Text></TouchableOpacity><Text>我目前在 </Text><TouchableOpacity><Text style={{color: 'red'}}>Google</Text></TouchableOpacity></查看>

告诉我.谢谢

更多风格参考:https://facebook.github.io/react-native/docs/style.html

I am trying to perform something like the following, which React Native does not like.

I want to wrap clickable text in a TouchableOpacity, and with its own styles.

By wrapping it in a parent Text component, all of the text sits perfectly side by side. However, I can't put a TouchableOpacity inside of a Text component.

<View>
  <Text>
    <Text>Hello my name is</Text>
    <TouchableOpacity onPress={this.openProfile}>
      <Text style={styles.clickable}>{ name }</Text>
    </TouchableOpacity>
    <Text>, I am currently working at </Text>
    <TouchableOpacity onPress={this.openCompanyPage}>
      <Text style={styles.clickable}>{ company }</Text>
    </TouchableOpacity>
  </Text>
</View>

I get the error: Views nested within a <Text> must have a width and height. I am unable to set those measurements as I want them to be dynamic and be dependant on the content.

For example name could be John Smith or Hubert Blaine Wolfe­schlegel­stein­hausen­berger­dorff Sr.

As per comment, I want to render portions of the text with custom styles. I can do that effortlessly by placing Text within Text. Now I want to add a clickable area to those portions of text ("Dan", "Google"). But I cannot embed a TouchableOpacity inside of a Text element.

解决方案

Dan. You need to achieve this by wrapping everything inside <View> tag and add style accordingly.

try this:

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello my name is </Text>
        <TouchableOpacity>
          <Text style={{color: 'red'}}>Dan, </Text>
        </TouchableOpacity>
        <Text>I am currently working at </Text>
        <TouchableOpacity>
          <Text style={{color: 'red'}}>Google</Text>
        </TouchableOpacity>
      </View>

Let me know. Thanks

Ref for more style : https://facebook.github.io/react-native/docs/style.html

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