Question

我有一个应用本机的应用程序，它有几个场景定义。现在我想在backandroid代码中使用popToRoute（）方法，这样当我点击后退按钮时，它将使用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方法来弹出特定场景？

Answer 1

要使用其他文件中的路径，您需要创建一个routes.js文件，该文件将所有路径保存在更全局的位置，您可以在需要时将其导入任何其他.js文件。

典型的routes.js文件将如下所示（请参阅以下内容，您还可以在此处管理转换）：

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

希望它可以帮到你！

如何使用导航器的popToRoute方法？

1 个答案: