react-native-router-flux:如何防止在选项卡之间切换时重置选项卡场景历史堆栈? [英] react-native-router-flux: How to prevent Tab Scene history stack from being reset when changing between tabs?

问题描述

我有一个带有 2 个标签场景的 Router 设置:

I have a Router setup with 2 tab scenes:

• 标签 1: 有 2 个可导航的场景(静态屏幕)；
  • 屏幕 A:有一个按钮可以导航到屏幕 B；
  • 屏幕 B:只需一段文字；
  • Tab 1: have 2 navigable scenes (static screens);
    • Screen A: have a button to navigate to Screen B;
    • Screen B: just have a text;
    • 屏幕 C:只有一个文本；
    • Screen C: just have a text;

    代码如下.

    app.js:

    import React from 'react';
    import { Router, Scene } from 'react-native-router-flux';
    import Tab from '../tab';
    import ScreenA from './a';
    import ScreenB from './b';
    import ScreenC from './c';
    
    
    export default class App extends React.Component {
      render(){
        return (
          <Router>
            <Scene key="root">
              <Scene key="tabbar" tabs={true}>
    
                <Scene key="tab1" title="Tab 1" icon={Tab}>
                  <Scene key="a" title="Screen A" component={ScreenA} />
                  <Scene key="b" title="Screen B" component={ScreenB} />
                </Scene>
    
                <Scene key="tab2" title="Tab 2" icon={Tab}>
                  <Scene key="c" title="Screen C" component={ScreenC} />
                </Scene>
    
              </Scene>
            </Scene>
          </Router>
        );
      }
    }
    

    屏幕也很简单.

    a.js:

    export default class ScreenA extends React.Component {
      render(){
        return (
          <View>
            <Text>This is Screen A</Text>
            <TouchableHighlight onPress={() => Actions.b()}>
              <Text>Go to Screen B</Text>
            </TouchableHighlight>
          </View>
        );
      }
    }
    

    b.js:

    export default class ScreenB extends React.Component {
      render(){
        return (
          <View>
            <Text>This is Screen B</Text>
          </View>
        );
      }
    }
    

    c.js:

    export default class ScreenC extends React.Component {
      render(){
        return (
          <View>
            <Text>This is Screen C</Text>
          </View>
        );
      }
    }
    

    用例:

    • 应用呈现屏幕 A(在选项卡 1 中)；
    • 点击屏幕 A 中的按钮:应用导航到屏幕 B(仍在选项卡 1 中)；
    • 点击标签 2:应用导航到屏幕 C(在标签 2 中).
    • 点击选项卡 1:应用导航到屏幕 A(在选项卡 1 中)并不导航到屏幕 B，如预期.

    Use case:

    • The app renders Screen A (in Tab 1);
    • Click on button in Screen A: the app navigates to Screen B (still in Tab 1);
    • Click on Tab 2: the app navigates to Screen C (in Tab 2).
    • Click on Tab 1: the app navigates to Screen A (in Tab 1) and NOT to Screen B, as expected.

    react-native-router-flux 当我们回到它们时，不会保留标签的历史堆栈.还是我在这里做错了什么?

    react-native-router-flux is not retaining the Tabs' history stack when we get back to them. Or am I doing something wrong here?

    软件包版本:

    • react v15.3.2
    • react-native v0.34.1
    • react-native-router-flux v3.36.0

    推荐答案

    原来这是 react-native-router-flux 包中的一个错误，它在这个 拉取请求.

    Turns out this was a bug in react-native-router-flux package, and it was fixed in this pull request.

    这篇关于react-native-router-flux:如何防止在选项卡之间切换时重置选项卡场景历史堆栈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！