将 < Image > 和 < TouchableHighlight > 放入 < View > 时，出现“ React. Children.only  只期望收到一個 React element child”錯誤

我有以下呈现方法在我的反应本机代码:

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 组件，它仍然会产生错误。

I can't see why it gives me this error. <View> should be able to have more than one component inside it for rendering.

187042 次浏览
小开
最佳答案

看来 <TouchableHighlight>必须只有一个孩子。文档说它只支持一个子元素，而且必须包含多个子元素，但是它不能至少(也不能包含大多数)一个子元素。我只是想有一个没有文本/图像的纯色按钮，所以我认为没有必要添加一个孩子。

我会试着更新文件来说明这一点。

小开

错误的源头是 <TouchableHighlight>元素。

Try running the code like this:

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

我也犯了同样的错误，即使我只有一个孩子。问题在于，我删除了其他一些评论，但这些评论是错误的。确保你的注释是正确的: http://wesbos.com/react-jsx-comments/

小开

就在 TouchableWithoutFeedback或 <TouchableHighlight>之后插入一个 <View>，这样你就不会得到这个错误。那为什么“ Pedram 回答或其他回答就足以解释了。

小开

通常它发生在触摸高光。无论如何错误意味着 你必须在任何组件内使用单个元素。

Solution : You can use single view inside parent and anything can be used inside that View. See the attached picture

在此输入图像描述

小开

是的，你确实需要在你的 <TouchableHighlight>里面生一个孩子。

And, If you don't want to pollute your file with Views you can use React 碎片 to achieve the same.

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

甚至还有一个反应片段的 简短的语法，所以上面的代码可以写成如下:

<TouchableWithoutFeedback>
<>
...
</>
</TouchableWithoutFeedback>
小开
  1. <TouchableHighlight>元素内只能有一个子元素
  2. 确保您已经导入了 Image
小开

在我的例子中，我只需要放下第一行元素:

这会抛出一个错误:

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

While this does not throw an error:

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

小开

使用「 react-native-gesture-handler」中的「 TouchableHighlight」代替「 react-native」

import { TouchableHighlight } from 'react-native-gesture-handler';

文件中的描述说:

Gesture Handler library provides an implementation of RN's touchable 组件，这些组件基于本机按钮，不依赖于 JS 响应系统使用的 RN。我们的触摸实现如下 the same API and aims to be a drop-in replacement for touchables 可在本机反应。

Https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/touchables/

您可以从以下位置安装此库: Https://github.com/software-mansion/react-native-gesture-handler

小开

It might be because of the wrong import statement for the TouchableWithoutFeedback.

错误: import { TouchableWithoutFeedback } from 'react-native'

import { TouchableWithoutFeedback } from 'react-native-gesture-handler'


提交答案