Wie verwendet man die popToRoute-Methode des Navigators?

Question

Ich habe eine App in native reagieren, die mehrere Szenen definiert hat.Jetzt will ich popToRoute() -Methode in Backandroid-Code verwenden, so dass wenn ich auf Zurück Schaltfläche klicken wird es mit PopToRoute-Methode in die bestimmte Szene verschieben statt Pop verwenden Methode, die den Navigationsstapel durchlaufen wird.

Dies ist mein Code von index.android.js, hier habe ich alle Navigationsrouten definiert.

class Flights extends Component { 
constructor(props){ 
    super(props); 
} 
    render() { 
    return (

     <Navigator 
      initialRoute={{id: 'App'}} 
      renderScene={this.renderScene.bind(this)} 
      configureScene={(route) => { 
      if (route.sceneConfig) { 
       return route.sceneConfig; 
      } 
      return Navigator.SceneConfigs.FloatFromRight; 
      }} /> 


    ); 
    } 
    renderScene(route, navigator) { 
    var routeId = route.id; 
    console.log(routeId); 
    if (routeId === 'App') { 

     console.log('App'); 
     return (

     <App 
      navigator={navigator} route={route} /> 

    ); 
    } 
    if (routeId === 'LoginPage') { 
console.log('round');  
    return (
     <AutoCompleteUI 
      navigator={navigator} route={route} /> 

    ); 
    } 
    if (routeId === 'LoginPage1') { 
console.log('round');  
    return (
     <AutoCompleteUI1 
      navigator={navigator} route={route} /> 

    ); 
    } 
     if (routeId === 'MainPage') { 
     console.log('main'); 
     return (
     <MainPage 
      navigator={navigator} route={route} /> 

    ); 

     } 
    if (routeId === 'LoginPage') { 
console.log('login');  
    return (
     <AutocompleteExample 
      navigator={navigator} route={route} /> 

    ); 

    } 

    if (routeId === 'NoNavigatorPage') { 
     return (
     <NoNavigatorPage 
      navigator={navigator} /> 
    ); 
    } 
    return this.noRoute(navigator); 

    } 
    noRoute(navigator) { 
    return (
     <View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}> 
     <TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} 
      onPress={() => navigator.pop()}> 
      <Text style={{color: 'red', fontWeight: 'bold'}}>请在 index.js 的 renderScene 中配置这个页面的路由</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

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

Nun ist die Frage, wie verwende ich popToRoute Methode in backAndroid Code in jeder anderen Szene zu bestimmten Szene Pop ??

Answer 1

Um die Routen in anderen Dateien verwenden zu können, müssen Sie eine routes.js-Datei erstellen, die alle Routen in einer globaleren Position enthält, und Sie können sie bei Bedarf in andere .js-Dateien importieren.

Eine typische routes.js Datei wie folgt sein wird (siehe die folgenden, können Sie auch Übergänge hier verwalten):

let Routes = { 
    OnBoardView: { 
    name: 'OnBoardView', 
    component: OnBoardView, 
    index: 0 
    }, 
    KeyfactView: { 
    name: 'KeyfactView', 
    component: KeyfactView, 
    index: 4, 
    sceneConfig: Navigator.SceneConfigs.PushFromRight 
    } 
} 

export Routes; 

Und in anderen View-Dateien, können Sie dies tun:

import Routes from 'routes'; 

... 
this.props.navigator.popToRoute(Routes.KeyfactView); 

Hoffe es hilft dir!