如何在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

丹。您需要通过将所有内容包装在<View>标记内并相应地添加样式来实现此目的。

试试这个：

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

让我知道。感谢

参考更多样式：https://facebook.github.io/react-native/docs/style.html

Answer 2

实际上，Bilal Hussain的解决方案对我不起作用。我说Nesting of <View> within <Text> is not supported on Android时出错。

对我有用的是this SO answer中描述的解决方案。仅使用<Text>元素，并向其应用onPress属性，如下所示：

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