Native deport Navigator.NavigationBar auf eine andere Datei reagieren (sauberer Code)

Question

Ich habe eine komplexe App, mit vielen Zeilen, also möchte ich Dateien maximal aufteilen, um Dateien von mehreren Zeilen zu vermeiden.

Hier ist mein Code:

export default class Nav extends Component { 
return(
    <Navigator 
    initialRoute={ ... } 
    renderScene={ ... } 
    navigationBar={ <Navigator.NavigationBar routeMapper={ ... }/> } 
    /> 
) 
} 

Hier ist, was ich erreichen möchte:

export default class Nav extends Component { 
return(
    <Navigator 
    initialRoute={ ... } 
    renderScene={ ... } 
    navigationBar={ <MyNavigationBar/> } 
    /> 
) 
} 

export default class MyNavigationBar extends Component { 
return(
    <Navigator.NavigationBar routeMapper={ ... }/> 
) 
} 

Aber wenn ich dies tun, habe ich eine Ausnahme: undefiniert ist kein Objekt (Bewertung ' navState.routeStack ')

Warum ist das? Wie soll ich es machen ?

Answer 1

Ich denke, Ihre NavigationBar Komponente fehlt jetzt einige Eigenschaften.

Sie sollten versuchen, alle Eigenschaften an die Komponente NavigationBar zu übergeben.

Als documentation

Diese Komponente wird in den genannten zwei Stützen wird erhalten: Navigator und den Navigator navState Komponente und seinen Zustand darstellt. Die Komponente wird erneut gerendert, wenn sich die Route ändert.

Versuchen Sie folgendes:

export default class MyNavigationBar extends Component { 
    return(
    <Navigator.NavigationBar {...this.props} routeMapper={ ... }/> 
) 
}