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

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?

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.

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

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>

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/

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.

1. <TouchableHighlight> Element kann nur ein Kind enthalten
2. Stellen Sie sicher, dass Sie Image importiert haben

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

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