尽管使用官方反应本机文档中的源代码，但 TouchableHighlight 不起作用

Posted 2023-02-22

【中文标题】尽管使用官方反应本机文档中的源代码，但 TouchableHighlight 不起作用

【英文标题】：TouchableHighlight not working although using the source code from official react native documentation

【发布时间】：2021-08-06 11:54:20

【问题描述】：

我是一名新的 react 原生开发人员，我遇到了 TouchableHighlight 问题，它总是显示错误“错误：React.Children.only 预计会收到单个 React 元素子项。”此外，当我删除它时，它照常工作，我假设这个问题是否来自我的设备/vscode/浏览器。因为我已经按照https://reactnative.dev/docs/touchablehighlight 的源代码，但仍然显示该错误。Error imageImage without TouchableHighlight tag

这是我的代码

render() 
return (
  <View style=styles.container>
    <TouchableHighlight onPress=this.onPress>
      <View style=styles.button>
        <Text>Touch Here</Text>
      </View>
      </TouchableHighlight>
    <View style=[styles.countContainer]>
      <Text style=[styles.countText]>
        this.state.count ? this.state.count : null
      </Text>
    </View>
  </View>
);

【问题讨论】：

您能在小吃博览会上向我们展示您的代码吗？

你能把确切的代码发给我们吗？

【参考方案1】：

从错误消息中可以看出，如果您将 Mutlipe 子组件传递给 TouchableHighlight，则可能会出现此问题

来自文档：

TouchableHighlight 必须有一个子级（不能为零或多个）。如果您希望有多个子组件，请将它们包装在一个视图中

<TouchableHighlight onPress=onPress>
  <View style=styles.button> // Mutlipe child components are wrapped in a View
    <Text>Touch</Text> // component 1
    <Text>Here</Text> // component 2
  </View>
</TouchableHighlight>