React-Native, как очистить внутренний стек навигации? - PullRequest
Новая
       27

React-Native, как очистить внутренний стек навигации?

0 голосов
/ 23 октября 2019

Я новичок в реагирующе-родном языке и разрабатываю приложение, в котором есть навигация по нижним вкладкам. Для реализации этого я использовал реагировать-навигация-материал-вкладки-внизу , который отлично работаетКак и у меня, у меня есть 3 экрана, скажем Home, Profile и About, в нижней вкладке навигатора. Но на экране Home у меня есть несколько экранов, которые нужно реализовать. Для этого я использовал Stack Navigator , что тоже отлично работает. Таким образом, мой поток приложений выглядит как Home-> Screen1-> Screen2-> Screen3. Когда я сталкиваюсь с проблемой, я предполагаю, что я на Screen3, а затем я переключаюсь на экран Профиль из нижней навигации, а затем снова переключаюсь на Home screen,

Я должен был видеть Главный экран там, но в настоящее время он показывает Screen3

Это то место, где я ушел. Что мне делать? Ниже приведен мой код

App.js (который содержит нижнюю навигацию) 

export default BottomTabNavigator = createMaterialBottomTabNavigator(
{
Home: {
  screen: HomeRoutes,
  },
},
Profile: {
  screen: ProfileScreen,
},
About: {
  screen: AboutScreen,
 },
},
{
initialRouteName: 'Home',
},
);

HomeRoutes.js 

export default createStackNavigator(
{
  Home:{
     screen: Home,
   },
  Screen1: {
     screen: Screen1,
   },
Screen2: {
    screen: Screen2,
  },
Screen3: {
  screen: Screen3,
   },
},
{
  initialRouteName: 'Home',
},
);

Или, может быть, я могу сделать что-то подобное, когдаЯ перехожу к screen1 с главного экрана, навигация по нижней вкладке не отображается пользователю?

Ответы [ 3 ]

1 голос
/ 23 октября 2019

Имена BottomTabNavigator и StackNavigator не должны совпадать.

Вы можете изменить этот код, как показано ниже. 

export default createStackNavigator(
  {
    CHome:{
      screen: Home,
    },
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
  },
  {
    initialRouteName: 'CHome',
  },
);
0 голосов
/ 02 ноября 2019

Я думаю, что вы хотите увидеть домашний экран снова, когда вы снова нажмете вкладку. Тогда это может решить проблему путем сравнения значений на текущем экране при повторном нажатии вкладки «Главная».

последний экран в HomeRoute

import { StackActions } from 'react-navigation';
...
let chk = false
...
 componentDidUpdate(){
    if (!chk){
      chk = true // Change value when rendering screen
    } else {
      //The popToTop action takes you back to the first screen in the stack, dismissing all the others.
      this.props.navigation.dispatch(StackActions.popToTop()); 
      chk = false //Initialization
    }
  }
0 голосов
/ 23 октября 2019

Проблема

С вашим кодом все в порядке, когда вы переходите от Home -> Screen 3 к сообщению Profile, у стека навигации есть история экрана 3, который является последним маршрутом в стеке, поэтому, когда вы возвращаетесь назадНа экране появится экран 3, а не экран 1.

Решение

Простой подход к этому состоит в том, что перед вызовом this.props.navigation.navigate('Profile') вы можете очистить сложенные маршруты, например: 

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

Примечание: Я не уверен, какую версию react-navigation вы используете, поэтому проверьте документы здесь для правильной версии и правильного использования, но это должно дать вамидея, как это сделать.

Надеюсь, это поможет!

...