У меня есть установка Router
с двумя вкладками:
- Tab 1: have 2 navigable scenes (static screens);
- Screen A: have a button to navigate to Screen B;
- Экран B: просто текст;
- Tab 2: just have 1 static screen.
- Screen C: just have a text;
Код выглядит следующим образом.
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, как и ожидалось.
react-native-router-flux
не сохраняет стек истории вкладок, когда мы возвращаемся к ним. Или я что-то не так здесь делаю?
Версии пакетов:
- реагировать v15.3.2
- реагировать родной v0.34.1
- реакция-родной-маршрутизатор-поток v3.36.0