Wie funktioniert die React-Native Navigationsleiste

Question

So habe ich versucht, die Reaktion-native Navigation zu bekommen, ich habe viele Beispiele online geschaut, aber ich verstehe immer noch nicht ganz, was ich falsch mache.

Mein Beispiel lose auf einer anderen basiert i auf Stackoverflow gefunden:

react-native Navigator.NavigationBar - where are the docs?

ich nicht in der Lage bin, um herauszufinden, wie Variablen in der Navigationsleiste für Wert zu übergeben wie ‚route.title‘ und "route.leftButton".

Wenn ich die App zum ersten Mal lade, scheint alles in Ordnung zu sein. Es holt die Daten von der Eigenschaft Navigator.initialRoute, aber wenn ich im Debug-Modus auf die linken oder rechten Schaltflächen klicke und den Wert der Route überprüfe, kann ich sehen, dass es ein Objekt ist, das nur eine einzige Eigenschaft 'id' enthält ist auf 'undefiniert' eingestellt.

Ich habe die Dokumentation angeschaut und ich denke, es könnte zu kurz sein, um es vollständig zu verstehen. jede Anleitung dazu wird geschätzt.

danke.

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TouchableOpacity 
} from 'react-native'; 

var NavigationBarRouteMapper = { 
    LeftButton: function(route, navigator, index, navState){ 
     return(
      <TouchableOpacity onPress={() => navigator.pop()}> 
       <Text>{ route.leftButton }TestLeft</Text> 
      </TouchableOpacity> 
     ) 
    }, 
    Title: function(route, navigator, index, navState){ 
     return(
      <Text>{ route.title }</Text> 
     ) 
    }, 
    RightButton: function(route, navigator, index, navState){ 
     debugger; 
     return(
      <TouchableOpacity onPress={() => navigator.push({id: 'PageTwo', title:'page222'})}> 
       <Text>{ route.rightButtonAction }TestRight</Text> 
      </TouchableOpacity> 
     ) 
    } 
} 

var PageOne = React.createClass({ 
    render(){ 
     return (
      <View> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
       <Text>you are on page 1</Text> 
      </View> 
     ) 
    } 
}); 

var PageTwo = React.createClass({ 
    render(){ 
     return (
      <View> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
       <Text>you are on page 2</Text> 
      </View> 
     ) 
    } 
}); 

class testApp extends Component { 

    renderScene(route, nav) { 
     switch (route.id) { 
      case 'PageOne': 
       return <PageOne navigator={ nav } leftButton={ "Back" } title={ "PageOne111" } rightButtonAction={"PageTwo"} /> 
      case 'PageTwo': 
       return <PageTwo navigator={ nav } leftButton={ "Back" } title={ "PageTwo222" } rightButtonAction={"PageOne"} />; 
     } 
    } 

    render() { 
     return (
      <Navigator 
       initialRoute={{ id: 'PageOne', title: 'PageOne' }} 
       renderScene={ this.renderScene } 
       configureScene={(route) => { 
        if (route.sceneConfig) { 
        return route.sceneConfig; 
        } 
        return Navigator.SceneConfigs.FloatFromRight; 
       }} 
       navigationBar={ 
        <Navigator.NavigationBar 
        routeMapper={ NavigationBarRouteMapper } 
        /> 
       } 
       /> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
    }, 
    instructions: { 
     textAlign: 'center', 
     color: '#333333', 
     marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('testApp',() => testApp); 

Answer 1

Ich empfehle diesen Artikel zu lesen, da er sehr informativ zu sein scheint. Es ist von Februar dieses Jahres, also könnte einiges schon veraltet sein.

https://medium.com/@dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30#.45yr7nycr

Ich denke, dass es nach unten im Grunde kommt den Zugriff auf die Route und Navigationseigenschaften in den Funktionen von NavigationBarRouteMapper zu haben und mit diesen Eigenschaften die Werte anzupassen.

(Code aus dem Artikel wiedergegeben, falls verschwindet es)

var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(index > 0) { 
     return (
     <TouchableHighlight 
      underlayColor="transparent" 
      onPress={() => { if (index > 0) { navigator.pop() } }}> 
      <Text style={ styles.leftNavButtonText }>Back</Text> 
     </TouchableHighlight>) 
    } 
    else { return null } 
    }, 
    RightButton(route, navigator, index, navState) { 
    if (route.onPress) return (
     <TouchableHighlight 
     onPress={() => route.onPress() }> 
     <Text style={ styles.rightNavButtonText }> 
       { route.rightText || 'Right Button' } 
     </Text> 
     </TouchableHighlight>) 
    }, 
    Title(route, navigator, index, navState) { 
    return <Text style={ styles.title }>MY APP TITLE</Text> 
    } 
}; 

Hoffentlich wird Ihnen helfen, in die richtige Richtung bewegen.