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

Posted 2023-04-18

【中文标题】(React Native) onPress 不适用于 Text 组件

【英文标题】：(React Native) onPress doesn't work for Text component

【发布时间】：2020-08-04 12:59:15

【问题描述】：

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

【参考方案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】：

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