Как сохранить сложенные экраны при переключении между вкладками в React Native Navigation - PullRequest
1 голос
/ 23 января 2020

Я использую навигатор нижней вкладки, созданный с помощью 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 вкладки, но я не знаю, как заставить вкладку "запоминать" сложенный экран, на котором она находилась, до того, как я отошел, как и поведение панели вкладок по умолчанию.

1 Ответ

1 голос
/ 04 февраля 2020

Вы можете передать имя фактического стека на navigation.navigate вместо имени начального экрана на указанной вкладке c, и составленные экраны должны сохраниться. Таким образом, вместо, например,

<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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...