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

【问题标题】：TouchableHighlight not working although using the source code from official react native documentation尽管使用官方反应本机文档中的源代码，但 TouchableHighlight 不起作用
【发布时间】：2021-08-06 11:54:20
【问题描述】：

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

【问题讨论】：

您能在小吃博览会上向我们展示您的代码吗？
你能把确切的代码发给我们吗？

标签： react-native touchablehighlight

【解决方案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>

【讨论】：