(React Native) onPress 不适用于文本组件

Question

我正在尝试让 onPress 工作，但没有打印“hi”。事实上，单击文本时应显示在文本后面的灰色默认背景并未显示。如果我用 TouchableHighlight 组件替换嵌套文本，它就会打印。但是，这需要是换行到下一行的连续文本流，因此 TouchableHighlight 不适合。

<Text>   
    <Text>Thanks for visiting the app! Please click </Text>
    <Text onPress={() => { console.log("hi") }}> here right now! </Text>
    <Text>to sign in</Text>
</Text>

实际的代码比上面的稍微复杂一些，但它基本上是一些嵌套在一个较大文本组件中的文本组件（这样文本可以换行到下一行，看起来像一段文本）。关于如何让 onPress 使文本组件正常工作有什么想法吗？谢谢！

它应该是什么样子（粗体文本代表可点击的内容）：

请 立即点击此处
登录。

它不应该是什么样子（不能使用视图作为外部持有者而不是文本）：

Please click here right to sign in. 
             now

Answer 1

我遇到了类似的问题，我在视图中使用了Text和 包装器的组合，请查看演示TouchableOpacityflexWrap : wrap

这是代码：

const test = () => {
  return ( 
    <View style={styles.container}>
      <Text style={styles.textPart1}>
      test you text {' '}
      </Text>
      <TouchableOpacity>
        <Text style={styles.textPart2}>
       clickable text
        </Text>
        </TouchableOpacity>    
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap',
    justifyContent: 'center',
    alignContent: 'center',
    padding: 10,
  },
  textPart1: {
    fontFamily: 'Raleway-Regular',
    fontSize: 20,
    color: '#5F5F5F',
  },
  textPart2: {
    fontFamily: 'Raleway-Regular',
    fontSize: 20,
    color: '#428947',
    textDecorationLine: 'underline',
  },
});