“React.Children.only 预期接收单个 React 元素子级”错误，将<Image>和<TouchableHighlight>放在<View>

javascript node.js reactjs react-native

2022-08-30 05:20:50

我在 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

我不明白为什么它会给我这个错误。应该能够在其中有多个组件进行渲染。<View>

答案 1

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

我将尝试更新文档以指示这一点。

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