“React.Children.only 期望接收单个 React 元素孩子"放置 <Image> 时出错和 <TouchableHighlight>在<视图> [英] "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

问题描述

我的 React Native 代码中有以下渲染方法:

I have the following render method in my React Native code:

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 元素孩子

React.Children.only expected to receive a single React element child

错误.如果我删除 TouchableHighlight 组件，它工作正常.另一方面，如果我删除 Image 组件，它仍然会出现该错误.我不明白为什么会出现此错误，并且 应该能够在其中包含多个组件进行渲染.
有什么想法吗?

error. If I remove the TouchableHighlight component, it works fine. On the other hand, if I remove the Image component, it still gives that error. I can't see why it would be giving this error, and <View> should be able to have more than one component inside it for rendering.
Any ideas?

推荐答案

看来 必须只有一个孩子.文档说它只支持一个子节点，并且多个子节点必须包含在 <View> 中，但并不是说它必须至少(和大多数)一个子节点.我只是想要一个没有文字/图像的纯色按钮，所以我认为没有必要添加一个孩子.

It seems that <TouchableHighlight> must have exactly one child. The docs say that it supports only one child and more than one must be wrapped in a <View>, but not that it must have at least (and most) one child. I just wanted to have a plain coloured button with no text/image, so I didn't deem it necessary to add a child.

我会尝试更新文档以表明这一点.

I'll try to update the docs to indicate this.

这篇关于“React.Children.only 期望接收单个 React 元素孩子"放置 <Image> 时出错和 <TouchableHighlight>在<视图>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！