Я использую навигатор нижней вкладки, созданный с помощью createBottomTabNavigator()
, и пропускаю его через несколько экранов, каждый из которых содержит собственную навигацию по стеку:
const tabNavigator = createBottomTabNavigator({
TradingStack,
LendingStack,
FinanceStack,
AccountBalancesStack,
OtherStack,
},
{
tabBarComponent: props => (
<NavigationFooter />
)
}
);
Я передаю свой собственный компонент нижнего навигатора, который называется <NavigationFooter />
. Когда tabBarComponent
опущен, используется встроенный навигатор в нижней вкладке, однако мне нужно больше функциональности, чем предлагает это встроенное решение. Проблема заключается в том, что при использовании моей пользовательской панели вкладок я теряю постоянство стека на отдельных экранах. Для пояснения, скажем, мой экран TradingStack
имеет несколько экранов, которые располагаются поверх него, и я открываю один из них. При использовании панели вкладок по умолчанию, если я переключусь на экран LendingStack
, а затем вернусь к TradingStack
, я все равно буду на сложенном экране, который был помещен поверх экрана root TradingStack
.
Однако, при использовании моего пользовательского компонента панели вкладок, перемещение между этими вкладками / экранами всегда приведет меня к root каждой из них, вместо того, чтобы вернуть меня к сложенному экрану, на котором была вкладка, прежде чем от нее отойти , Вот мой пользовательский компонент нижнего колонтитула:
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()
до go для нужного экрана, но, как уже упоминалось, это подводит меня к root экрана. Я понимаю, что это, по сути, явное указание приложению перейти к экрану root вкладки, но я не знаю, как заставить вкладку "запоминать" сложенный экран, на котором она находилась, до того, как я отошел, как и поведение панели вкладок по умолчанию.