React native 更改选项卡时重置选项卡场景历史堆栈
我的问题实际上是关于希望中所示的bug的确切行为 我从链接的问题中复制了确切的场景描述和代码片段,因为这正是我所需要的 我有一个React native 更改选项卡时重置选项卡场景历史堆栈,react-native,react-native-router-flux,React Native,React Native Router Flux,我的问题实际上是关于希望中所示的bug的确切行为 我从链接的问题中复制了确切的场景描述和代码片段,因为这正是我所需要的 我有一个路由器设置,有两个选项卡场景: 选项卡1:有2个可导航场景(静态屏幕); 屏幕A:有一个按钮可导航到屏幕B 屏幕B:只要有一个文本 选项卡2:只有一个静态屏幕。 屏幕C:只需一个文本 代码如下 app.js: import React from 'react'; import { Router, Scene } from 'react-native-rout
路由器
设置,有两个选项卡场景:
- 选项卡1:有2个可导航场景(静态屏幕);
- 屏幕A:有一个按钮可导航到屏幕B李>
- 屏幕B:只要有一个文本李>
- 选项卡2:只有一个静态屏幕。
- 屏幕C:只需一个文本李>
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>
);
}
}
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>
);
}
}
export default class ScreenB extends React.Component {
render(){
return (
<View>
<Text>This is Screen B</Text>
</View>
);
}
}
export default class ScreenC extends React.Component {
render(){
return (
<View>
<Text>This is Screen C</Text>
</View>
);
}
}
从“React”导入React;
从“react native Router flux”导入{Router,Scene};
从“../Tab”导入选项卡;
从“/a”导入屏幕a;
从“/b”导入屏幕b;
从“./c”导入ScreenC;
导出默认类App扩展React.Component{
render(){
返回(
);
}
}
屏幕也很简单
a.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>
);
}
}
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>
);
}
}
export default class ScreenB extends React.Component {
render(){
return (
<View>
<Text>This is Screen B</Text>
</View>
);
}
}
export default class ScreenC extends React.Component {
render(){
return (
<View>
<Text>This is Screen C</Text>
</View>
);
}
}
导出默认类ScreenA扩展React.Component{
render(){
返回(
这是屏幕A
Actions.b()}>
转到屏幕B
);
}
}
b.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>
);
}
}
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>
);
}
}
export default class ScreenB extends React.Component {
render(){
return (
<View>
<Text>This is Screen B</Text>
</View>
);
}
}
export default class ScreenC extends React.Component {
render(){
return (
<View>
<Text>This is Screen C</Text>
</View>
);
}
}
导出默认类ScreenB扩展React.Component{
render(){
返回(
这是B屏
);
}
}
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>
);
}
}
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>
);
}
}
export default class ScreenB extends React.Component {
render(){
return (
<View>
<Text>This is Screen B</Text>
</View>
);
}
}
export default class ScreenC extends React.Component {
render(){
return (
<View>
<Text>This is Screen C</Text>
</View>
);
}
}
导出默认类ScreenC扩展React.Component{
render(){
返回(
这是C屏
);
}
}
所需的用例:
- 应用程序呈现屏幕A(在选项卡1中)李>
- 单击屏幕A中的按钮:应用程序导航到屏幕B(仍在选项卡1中)李>
- 单击选项卡2:应用程序导航到屏幕C(在选项卡2中)
- 单击选项卡1:应用程序会导航到屏幕A(在选项卡1中),而不会导航到屏幕B,因为它是按设计的