将<Image>和<TouchableHighlight>放在<View>中时出现“ React.Children.only仅预期接收单个React元素子元素”错误

我的React Native代码中有以下render方法：

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }

它给了我一个

React.Children.only仅预期接收单个React元素的子元素

错误。如果我删除了该TouchableHighlight组件，则可以正常工作。另一方面，如果删除Image组件，它仍然会给出该错误。我看不到为什么会出现此错误，并且<View>应该能够在其中包含多个组件进行渲染。
有任何想法吗？

似乎<TouchableHighlight>必须有一个孩子。文档说，它只支持一个孩子，一个孩子必须包裹一个以上的孩子。<View>，但不是说它必须至少（最多）一个孩子。我只想有一个没有文本/图像的纯色按钮，所以我认为没有必要添加一个孩子。

我将尝试更新文档以表明这一点。

的<TouchableHighlight>元素是错误的来源。该<TouchableHighlight>元素必须有一个子元素。

尝试运行如下代码：

render() {
    const {height, width} = Dimensions.get('window');
    return (
        <View style={styles.container}>
            <Image 
                style={{
                    height:height,
                    width:width,
                }}
                source={require('image!foo')}
                resizeMode='cover' 
            />
            <TouchableHighlight style={styles.button}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}

是的，的确，您体内必须有一个孩子<TouchableHighlight>。

而且，如果您不想污染文件，Views可以使用React Fragments来实现。

<TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>

甚至更好的是，React Fragments的语法很短。所以上面的代码可以写成如下：

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>

即使在之下只有一个孩子，我也遇到了同样的错误TouchableHighlight。问题是，我还有其他人对此进行了评论，但不正确。确保适当地注释掉了：http : //wesbos.com/react-jsx-comments/

紧接着插入TouchableWithoutFeedback或<TouchableHighlight>以<View>这种方式插入时，您不会收到此错误。为什么@Pedram答案或其他答案足够解释。

通常它发生在TochableHighlight中。无论如何，错误意味着您必须在任何组件内使用单个元素。

解决方案：您可以在父级内部使用单个视图，并且可以在该视图内部使用任何视图。 见附图

在此处输入图片说明

1. <TouchableHighlight> 元素里面只能有一个孩子
2. 确保已导入图像

就我而言，我只需要将元素向下一行：

这将引发错误：

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}> {props.children}
  </TouchableWithoutFeedback>;
}

虽然这不会引发错误：

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    {props.children}
  </TouchableWithoutFeedback>;
}