react-native - 在 React Native Navigation 中的选项卡之间切换时如何保持堆叠的屏幕
问题描述
我正在使用一个底部选项卡导航器创建createBottomTabNavigator()
并传递几个屏幕,每个屏幕都包含自己的堆栈导航:
const tabNavigator = createBottomTabNavigator({
TradingStack,
LendingStack,
FinanceStack,
AccountBalancesStack,
OtherStack,
},
{
tabBarComponent: props => (
<NavigationFooter />
)
}
);
我将我自己的自定义底部导航器组件传递给它,称为<NavigationFooter />
. 如果tabBarComponent
省略,则使用内置的底部选项卡导航器,但是我需要比此内置解决方案提供的更多功能。问题是,当使用我的自定义标签栏时,我在各个屏幕中失去了堆栈持久性。澄清一下,假设我的TradingStack
屏幕上有几个堆叠在上面的屏幕,我打开其中一个。使用默认标签栏时,如果我切换到LendingStack
屏幕然后返回TradingStack
,我仍然会在被推到根TradingStack
屏幕顶部的堆叠屏幕上。
但是,当使用我的自定义选项卡栏组件时,在这些选项卡/屏幕之间移动总是会将我带到每个选项卡的根目录,而不是让我回到选项卡所在的堆叠屏幕,然后再离开它。这是我的自定义页脚组件:
function Footer({navigation}) {
return(
<View style={styles.tabBarStyle}>
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Lending')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Finance')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('AccountBalances')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TabScreen')} />
</View>
);
}
const NavigationFooter = withNavigation(Footer);
如您所见,当TouchableOpacity
按下其中一个元素时,我navigation.navigate()
会转到所需的屏幕,但是,如前所述,这会将我带到屏幕的根部。我知道这基本上是明确告诉应用程序导航到选项卡的根屏幕,但我不知道如何让选项卡“记住”在我离开之前它所在的堆叠屏幕,就像默认标签栏。
解决方案
您可以将实际堆栈的名称传递给navigation.navigate
该特定选项卡上的起始屏幕的名称,而不是该特定选项卡上的开始屏幕的名称,并且堆叠的屏幕应该保持不变。所以,而不是,例如
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')}/> //name of the screen
你应该通过它
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TradingStack')}/> //name of the stack
假设Trading
是TradingStack
.
推荐阅读
- graphql - 在 Blazor WebAssembly 中使用 GraphQL API
- r - 如何在 R 中的 if else 语句中忽略跨多个列的 NA?
- java - 是否可以更改 xml 签名的命名空间值?
- ansible - Ansible win_credentials 失败(尽管已给出但要求成为)
- sql - 如何在具有 NULL 的列上连接数据集?
- android - 未处理的异常:NoSuchMethodError:在 null 上调用了方法“addUser”
- vuetify.js - 同一页面上具有可扩展行的多个 Vuetify 数据表
- azure - 在 U-SQL 中获取当前和上个月的第一个日期
- ruby-on-rails - “用户最后一次在线”在
- mysql - Xampp MySql 错误:MySQL 意外关闭