(React Native) onPress 不适用于 Text 组件答案

【问题标题】：(React Native) onPress doesn't work for Text component(React Native) onPress 不适用于 Text 组件
【发布时间】：2023-03-21 03:22:01
【问题描述】：

我正在尝试让 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

【问题讨论】：

标签： reactjs react-native text react-props onpress

【解决方案1】：

我遇到了类似的问题，我在带有flexWrap : wrap 的视图中使用了Text 和TouchableOpacity 包装器的组合，查看demo

这里是代码：


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',
  },
});

【讨论】：

有效。谢谢！
对不起，但实际上问题仍然存在。是的，我可以点击文本，但是外部视图没有正确地包裹所有文本（它仍然像视图一样将文本组件排列成一行）
对不起，你的例子不起作用。我会更新我的问题，说出它的样子
没问题，我用 onPress in Text 测试它确实显示日志snack.expo.io/ZVd_tOOgyR
是的，但这对我来说不起作用，我不太清楚为什么

【解决方案2】：

原来我的解决方案是清理并重建项目....

【讨论】：