将<Image>和<TouchableHighlight>放入<View>时,"React.Children.only预计会收到一个React元素子"错误

Question

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

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>应该能够在其中包含多个组件进行渲染.
有任何想法吗？

Answer 1

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

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

Answer 2

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

Answer 3

是的，您确实需要在您的<TouchableHighlight>.

而且，如果你不想污染你的文件，Views你可以使用 React Fragments来达到同样的目的。

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

或者更好的是React Fragments有一个简短的语法。所以上面的代码可以写成如下：

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