将和放置在中时出现“React.Children.仅预期接收单个React元素子级”错误

Question

我的React本机代码中有以下呈现方法：

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

如果我删除了TouchableHighlight组件，它就可以正常工作。如果我删除图像组件，它仍然会给出错误。

我不明白为什么它会给我这个错误<代码>

Answer 1

是的，你确实需要有一个孩子在你的

而且，如果您不想用视图污染您的文件，您可以使用React片段来实现同样的效果。

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

或者更好的是，对于React片段有一个简短的语法。因此，上述代码可以编写如下：

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

Answer 2

试着像这样运行代码：

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>
    );
}

Answer 3

似乎

我会试着更新文档来表明这一点。