Der Fehler "React.Children.only erwartet, dass ein einzelnes untergeordnetes React-Element empfangen wird", wenn <Image> und <TouchableHighlight> in eine <View> eingefügt werden

84

Ich habe die folgende Rendermethode in meinem 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>
    );
  }

Es gibt mir eine

React.Children.nur erwartet, dass ein einzelnes untergeordnetes React-Element empfangen wird

Error. Wenn ich die TouchableHighlightKomponente entferne , funktioniert es gut. Wenn ich dagegen die Image-Komponente entferne, wird dieser Fehler immer noch angezeigt. Ich kann nicht verstehen, warum es diesen Fehler geben würde, und <View>sollte in der Lage sein, mehr als eine Komponente zum Rendern darin zu haben.
Irgendwelche Ideen?

Pedram
quelle

Antworten:

96

Es scheint, <TouchableHighlight>dass genau ein Kind haben muss. Die Dokumente sagen, dass es nur ein Kind unterstützt und mehr als eines in ein eingewickelt werden muss <View>, aber nicht, dass es mindestens (und die meisten) ein Kind haben muss. Ich wollte nur einen einfarbigen Knopf ohne Text / Bild haben, deshalb hielt ich es nicht für notwendig, ein Kind hinzuzufügen.

Ich werde versuchen, die Dokumente zu aktualisieren, um dies anzuzeigen.

Pedram
quelle
32

Das <TouchableHighlight>Element ist die Fehlerquelle. Das <TouchableHighlight>Element muss ein untergeordnetes Element haben .

Versuchen Sie, den Code folgendermaßen auszuführen:

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>
    );
}
Christopher Peter
quelle
7

Ja, in der Tat müssen Sie ein Kind in sich haben <TouchableHighlight>.

Und wenn Sie Ihre Datei nicht verschmutzen möchten, können Sie mit " FragmenteViews reagieren" dasselbe erreichen.

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

oder noch besser, es gibt eine kurze Syntax für React Fragments. Der obige Code kann also wie folgt geschrieben werden:

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>
vikrantnegi
quelle
3

Ich hatte den gleichen Fehler, auch wenn ich nur ein Kind unter der hatte TouchableHighlight. Das Problem war, dass ich einige andere auskommentiert hatte, aber falsch. Stellen Sie sicher, dass Sie entsprechend kommentieren: http://wesbos.com/react-jsx-comments/

maxko87
quelle
3

Kurz danach TouchableWithoutFeedbackoder auf diese Weise <TouchableHighlight>einfügen <View>, wird dieser Fehler nicht angezeigt. Warum ist das dann @Pedram Antwort oder andere Antworten erklärt genug.

dänisch
quelle
2
  1. <TouchableHighlight> Element kann nur ein Kind enthalten
  2. Stellen Sie sicher, dass Sie Image importiert haben
Jasur Shukurov
quelle
1

Normalerweise passiert es in TochableHighlight. Auf jeden Fall bedeutet ein Fehler, dass Sie ein einzelnes Element innerhalb der beliebigen Komponente verwenden müssen.

Lösung: Sie können eine einzelne Ansicht innerhalb der übergeordneten Ansicht verwenden und alles kann in dieser Ansicht verwendet werden. Siehe das beigefügte Bild

Geben Sie hier die Bildbeschreibung ein

Harsha Koshila
quelle
1
Willkommen bei Stack Overflow. Verwenden Sie keine Textbilder, um etwas zu beschreiben, das leicht eingegeben und dann mit der Ihnen zur Verfügung stehenden Markdown-Funktion formatiert werden kann.
chb
0

In meinem Fall musste ich das Element nur eine Zeile nach unten setzen:

Dies wirft einen Fehler aus:

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

Dies wirft zwar keinen Fehler aus:

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

jonyB
quelle