I have a Router installation with two tab scenes:
- Tab 1: has 2 navigation scenes (static screens);
- Screen A: has a button to go to Screen B ;
- Screen B: has only text;
- Tab 2: has only one static screen.
The code is as follows.
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> ); } }
The screen is also quite simple.
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> ); } }
Use Case:
- The application displays screen A (in table. 1);
- Press the button on screen A: the application will go to Screen B (still in Table 1);
- Click tab 2: the application will go to Screen C (in table 2).
- Press tab 1: the application goes to Screen A (in tab 1) and NOT to screen B, as expected.
react-native-router-flux does not save the tab history stack when we return to them. Or am I doing something wrong here?
Package Options:
- Reply v15.3.2
- response-native v0.34.1
- response-native-router-flux v3.36.0
source share