react-native-router-flux:切换标签时如何保留父导航栏?
react-native-router-flux: How can I retain parent navbar when switching tabs?
目前我的路由器中有以下内容:
<Scene key="results" title="Query Results"
tabs={true} tabBarStyle={style.tabBarStyle}>
<Scene
key="listResultsTab"
title="List"
icon={TabIcon}
>
<Scene key="listResults" component={ListResultsScene} title="Results List" />
</Scene>
<Scene
key="mapResultsTab"
title="Map"
icon={TabIcon}
>
<Scene key="mapResults" component={MapResultsScene} title="Results Map" />
</Scene>
</Scene>
到目前为止,它创建了一个带有两个选项卡的选项卡栏,这两个选项卡在 ListResults 和 MapResults 组件之间交替,这正是我想要的。但是,每个选项卡都维护自己的导航栏。这不一定是个问题,只是它覆盖了父导航栏,所以我无法访问查询结果之前的任何内容。
我理想的设置是这样的:
launchScreen --> queryResults----->listResults -> ... ->
|
-->mapResults-> ... ->
有没有办法在选项卡之间切换时保留 queryResults 的导航栏?
docs说
Every tab has its own navigation bar. However, if you do not set its parent with hideNavBar={true}, the tabs' navigation bar will be overrided by their parent.
然而,情况似乎并非如此。我没有使用 hideNavBar 并且父级的导航栏仍然被选项卡覆盖。我想也许我可以在选项卡上使用 hideNavBar,但这只会完全删除导航栏。
编辑:更新更详细的信息。
这是我的完整场景列表。
import React from 'react';
import {StyleSheet, Text } from 'react-native';
import { Actions, Scene, ActionConst } from 'react-native-router-flux';
import LaunchScene from '../scenes/LaunchScene';
import LoginScene from '../scenes/LoginScene';
import WorkspaceSelectionScene from '../scenes/WorkspaceSelectionScene';
import QuerySelectionScene from '../scenes/QuerySelectionScene';
import EditQueryScene from '../scenes/EditQueryScene';
import ListResultsScene from '../scenes/ListResultsScene';
import MapResultsScene from '../scenes/MapResultsScene';
const style = StyleSheet.create({
tabBarStyle: {
borderTopWidth : .5,
borderColor : '#b7b7b7',
backgroundColor: 'white',
opacity: 1
},
padForNavBar: {
paddingTop: 64
}
});
const TabIcon = ({ selected, title }) => {
return (
<Text style={{color: selected ? 'red' :'black'}}>{title}</Text>
);
}
const scenes = Actions.create(
<Scene key="root">
<Scene key="login" component={LoginScene} title="Login" sceneStyle={style.padForNavBar} />
<Scene key="workspaceSelection" component={WorkspaceSelectionScene}
title="Workspace Selection" sceneStyle={style.padForNavBar} />
<Scene key="querySelection" component={QuerySelectionScene}
title="Query Selection" sceneStyle={style.padForNavBar} />
<Scene key="launch" component={LaunchScene} title="Launch" sceneStyle={style.padForNavBar} />
<Scene key="editQuery" component={EditQueryScene} title="Edit Query" sceneStyle={style.padForNavBar} />
<Scene key="results" title="Query Results"
tabs={true} tabBarStyle={style.tabBarStyle}>
<Scene
key="listResultsTab"
title="List"
icon={TabIcon}
>
<Scene key="listResults" component={ListResultsScene} title="Results List" sceneStyle={style.padForNavBar} />
</Scene>
<Scene
key="mapResultsTab"
title="Map"
icon={TabIcon}
>
<Scene key="mapResults" component={MapResultsScene} title="Results Map" sceneStyle={style.padForNavBar} />
</Scene>
</Scene>
</Scene>
);
export default scenes
当我点击嵌套在结果场景中的 listResults 选项卡时,这就是我的选项卡的样子。请注意,我仍然可以 return 到前面的页面。
但是当我将选项卡切换到 mapResults 选项卡时,仍然在结果场景中,导航栏被重置。我无法再使用后退按钮。切换回 listResults 不会恢复它。
伙计,我有东西要给你,将它添加到你的场景中,它会防止你的状态重置。 type={ActionConst.REFRESH}
这将刷新您的堆栈,或者您可以这样做:
componentDidMount(){
Actions.refresh({backTitle: ()=> this.props.title})
}
要从堆栈中弹出的位置。
干杯:)
更新后发现这是库的问题。已打开一个问题,并在随后的提交中得到更正。
目前我的路由器中有以下内容:
<Scene key="results" title="Query Results"
tabs={true} tabBarStyle={style.tabBarStyle}>
<Scene
key="listResultsTab"
title="List"
icon={TabIcon}
>
<Scene key="listResults" component={ListResultsScene} title="Results List" />
</Scene>
<Scene
key="mapResultsTab"
title="Map"
icon={TabIcon}
>
<Scene key="mapResults" component={MapResultsScene} title="Results Map" />
</Scene>
</Scene>
到目前为止,它创建了一个带有两个选项卡的选项卡栏,这两个选项卡在 ListResults 和 MapResults 组件之间交替,这正是我想要的。但是,每个选项卡都维护自己的导航栏。这不一定是个问题,只是它覆盖了父导航栏,所以我无法访问查询结果之前的任何内容。
我理想的设置是这样的:
launchScreen --> queryResults----->listResults -> ... ->
|
-->mapResults-> ... ->
有没有办法在选项卡之间切换时保留 queryResults 的导航栏?
docs说
Every tab has its own navigation bar. However, if you do not set its parent with hideNavBar={true}, the tabs' navigation bar will be overrided by their parent.
然而,情况似乎并非如此。我没有使用 hideNavBar 并且父级的导航栏仍然被选项卡覆盖。我想也许我可以在选项卡上使用 hideNavBar,但这只会完全删除导航栏。
编辑:更新更详细的信息。
这是我的完整场景列表。
import React from 'react';
import {StyleSheet, Text } from 'react-native';
import { Actions, Scene, ActionConst } from 'react-native-router-flux';
import LaunchScene from '../scenes/LaunchScene';
import LoginScene from '../scenes/LoginScene';
import WorkspaceSelectionScene from '../scenes/WorkspaceSelectionScene';
import QuerySelectionScene from '../scenes/QuerySelectionScene';
import EditQueryScene from '../scenes/EditQueryScene';
import ListResultsScene from '../scenes/ListResultsScene';
import MapResultsScene from '../scenes/MapResultsScene';
const style = StyleSheet.create({
tabBarStyle: {
borderTopWidth : .5,
borderColor : '#b7b7b7',
backgroundColor: 'white',
opacity: 1
},
padForNavBar: {
paddingTop: 64
}
});
const TabIcon = ({ selected, title }) => {
return (
<Text style={{color: selected ? 'red' :'black'}}>{title}</Text>
);
}
const scenes = Actions.create(
<Scene key="root">
<Scene key="login" component={LoginScene} title="Login" sceneStyle={style.padForNavBar} />
<Scene key="workspaceSelection" component={WorkspaceSelectionScene}
title="Workspace Selection" sceneStyle={style.padForNavBar} />
<Scene key="querySelection" component={QuerySelectionScene}
title="Query Selection" sceneStyle={style.padForNavBar} />
<Scene key="launch" component={LaunchScene} title="Launch" sceneStyle={style.padForNavBar} />
<Scene key="editQuery" component={EditQueryScene} title="Edit Query" sceneStyle={style.padForNavBar} />
<Scene key="results" title="Query Results"
tabs={true} tabBarStyle={style.tabBarStyle}>
<Scene
key="listResultsTab"
title="List"
icon={TabIcon}
>
<Scene key="listResults" component={ListResultsScene} title="Results List" sceneStyle={style.padForNavBar} />
</Scene>
<Scene
key="mapResultsTab"
title="Map"
icon={TabIcon}
>
<Scene key="mapResults" component={MapResultsScene} title="Results Map" sceneStyle={style.padForNavBar} />
</Scene>
</Scene>
</Scene>
);
export default scenes
当我点击嵌套在结果场景中的 listResults 选项卡时,这就是我的选项卡的样子。请注意,我仍然可以 return 到前面的页面。
但是当我将选项卡切换到 mapResults 选项卡时,仍然在结果场景中,导航栏被重置。我无法再使用后退按钮。切换回 listResults 不会恢复它。
伙计,我有东西要给你,将它添加到你的场景中,它会防止你的状态重置。 type={ActionConst.REFRESH}
这将刷新您的堆栈,或者您可以这样做:
componentDidMount(){
Actions.refresh({backTitle: ()=> this.props.title})
}
要从堆栈中弹出的位置。
干杯:)
更新后发现这是库的问题。已打开一个问题,并在随后的提交中得到更正。