如何使用导航器的PopToroute方法



我在react Native中有一个应用程序,该应用程序已定义了几个场景。使用PopToroute方法而不是使用将通过导航堆栈的POP方法的特定场景。

这是我的index.android.js代码,在这里我定义了所有导航路线。

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

现在问题是如何在任何其他场景中使用Backandroid代码中的PopToroute方法弹出到特定场景??

要使用其他文件中的路由,您将需要创建一个路由。当您需要时文件。

典型的路由。

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

和其他视图文件中,您可以执行此操作:

import Routes from 'routes';
...
this.props.navigator.popToRoute(Routes.KeyfactView);

希望它能帮助您!

相关内容

  • 没有找到相关文章

最新更新