Angrenzenden JSX-Elemente müssen gewickelt werden, die in einem umschließenden tag

Ich möchte eine Navigationsleiste am unteren und eine Symbolleiste am oberen Rand jeder Seite in meine Reagieren Native app. Jedoch, wenn ich diese beiden Elemente in der index.ios.js Datei, erhalte ich die Fehlermeldung: "Angrenzenden JSX-Elemente müssen gewickelt werden, die in einem umschließenden tag". Wenn ich tags rund um die Navigator und die NavBar habe ich nur einen leeren Bildschirm angezeigt, in mein app. Was soll ich tun? Hier ist, was mein render-Funktion sieht aus wie in index.ios.js

JS:

render() {
    return (
      <Navigator
        initialRoute={{name: 'Login'}}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
          style={ styles.nav }
          routeMapper={ NavigationBarRouteMapper } />
        }
        />
        <NavBar />
    );
  }

InformationsquelleAutor Adil Jiwani | 2017-04-04
  1. 8

    Wenn Sie wickeln Sie es in einer Ansicht stellen Sie sicher, dass Sie die flex-1. Meine Vermutung ist, dass die Ansicht, die Sie geben, es hat keine Größe und somit die Kind-Elemente vererben Ihre Größe von den Eltern (die 0)

    • das ist richtig
    • 100% richtig. Vielen Dank!
    InformationsquelleAutor Daniel Slater
  2. 9

    Als pro Reagieren 16, wenn Sie wan ' T um zu vermeiden, die <View> Verpackung,
    zurück können Sie mehrere Komponenten von Rendern als ein array.

    return ([
    <Navigator key="navigator" />,
    <NavBar key="navbar" />
]);

    Oder in einer Staatenlosen ES6-Komponente:

    import React from 'react';

const Component = () => [
  <Navigator key="navigator" />,
  <NavBar key="navbar" />
];

export default Component;

    Vergessen Sie nicht, die key-Eigenschaft wie Reagieren muss (wie für die iteration über Array) in der Lage sein zu unterscheiden, Ihre Komponenten.

    Bearbeiten (Nov. 2018)

    Können Sie auch verwenden,Reagieren.- Fragment Kürzel: 

    render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
    InformationsquelleAutor François Maturel
  3. 2

    Wrap-innen eine Ansicht, und geben Sie das äußere Ansicht wrapper ein Stil, der flex-1. Beispiel:

        <View style={{flex: 1}}>
        <Navigator 
           {. . .} 
        />
        <NavBar />
    </View>
    InformationsquelleAutor wvicioso
Schreibe einen Kommentar