更改标签

时间:2017-01-19 08:54:09

标签: react-native react-native-router-flux

我的问题实际上是关于希望react-native-router-flux: How to prevent Tab Scene history stack from being reseted when changing between tabs?

中说明的错误的确切行为

我正在复制链接问题的确切场景描述和代码片段,因为它正是我需要的

  

我有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>
    );
  }
}
     

屏幕也非常简单。

     

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,因为它是设计使然。

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

1 个答案:

答案 0 :(得分:0)