react-native - 如何在 Text 中的 Text 周围包裹一个 TouchableOpacity？

Question

我正在尝试执行以下操作，这是 React Native 不喜欢的。

我想在 TouchableOpacity 中包装可点击的文本，并使用它自己的样式。

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

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

我收到错误: Views nested within a <Text> must have a width and height .我无法设置这些测量值，因为我希望它们是动态的并且依赖于内容。

例如 name可以是 John Smith 或 Hubert Blaine Wolfe­schlegel­stein­hausen­berger­dorff Sr .

根据评论，我想用自定义样式呈现部分文本。我可以通过放置 Text within Text 毫不费力地做到这一点。 .现在我想为这些文本部分(“Dan”、“Google”)添加一个可点击区域。但是我不能在 Text 元素中嵌入 TouchableOpacity。

Answer 1

实际上，Bilal Hussain 的解决方案对我不起作用。我收到一条错误消息 Nesting of <View> within <Text> is not supported on Android .

对我有用的是 this SO answer 中描述的解决方案.只是使用 <Text>仅元素并应用 onPress他们的属性(property)是这样的:

<Text>
        Hello my name is
        <Text style={{color: 'red'}} onPress={function1}>Dan, </Text>
        I am currently working at
        <Text style={{color: 'red'}} onPress={function2}>Google</Text>
</Text>