6

我有一个Router带有 2 个选项卡场景的设置：

  • 选项卡 1：有 2 个可导航场景（静态屏幕）；
    • 屏幕 A：有一个按钮可以导航到屏幕 B；
    • 屏幕B：只有一个文本；
  • 选项卡 2：只有 1 个静态屏幕。
    • 屏幕C：只有一个文本；

代码如下。

应用程序.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>
    );
  }
}

画面也很简单。

一个.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，如预期的那样。

react-native-router-flux当我们回到它们时，不会保留选项卡的历史堆栈。还是我在这里做错了什么？

软件包版本：

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

1 回答 1

3

原来这是react-native-router-flux包中的一个错误，它已在此pull request中修复。

于 2016-11-14T20:14:47.830 回答