react-native-router-flux:如何防止在标签之间切换时重置Tab场景历史堆栈?

Alm*_*lho 6 react-native react-native-router-flux

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

  • 标签1:有2个可导航的场景(静态屏幕);
    • 屏幕A:有一个导航到屏幕B的按钮;
    • 屏幕B:只有一个文字;
  • 标签2:只有1个静态屏幕.
    • 屏幕C:只有一个文字;

代码如下.

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>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

屏幕也非常简单.

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>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

b.js:

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

c.js:

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

使用案例:

  • 该应用程序呈现屏幕A(在表1中);
  • 单击屏幕A中的按钮:应用程序导航到屏幕B(仍然在选项卡1中);
  • 单击选项卡2:应用程序导航到屏幕C(在选项卡2中).
  • 点击表1:应用程序导航到画面A(在选项卡1)和NOT到画面B,如所预期.

react-native-router-flux我们回到它们时没有保留Tabs的历史堆栈.或者我在这里做错了什么?

包版本:

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

Alm*_*lho 3

事实证明,这是react-native-router-flux包中的一个错误,并且在此拉取请求中已修复。