1

我的问题实际上是关于想要在react-native-router-flux 中说明的错误的确切行为：如何防止选项卡场景历史堆栈在选项卡之间更改时被重置？

我正在从链接的问题中复制确切的场景描述和代码片段，因为这正是我所需要的

我有一个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，因为它是设计使然。

我知道我可以实现一个自定义减速器来解决这个问题，但我相信必须有一个更直接的解决方案我可能会忽略。

4

0 回答 0