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

Я новичок в react-native и разрабатываю приложение с нижней навигацией по вкладкам. Для реализации этого я использовал response-navigation-material-bottom-tabs, который отлично работает. Как будто у меня есть 3 экрана, например «Домой», «Профиль» и «О программе» в нижнем навигаторе вкладок. Но на экране Домой я должен реализовать несколько экранов. Для этого я использовал Навигатор стека , который тоже работает нормально. Таким образом, поток моего приложения похож на Home-> Screen1-> Screen2-> Screen3. Я столкнулся с проблемой: предположим, я нахожусь на Screen3, а затем переключаюсь на экран Профиль в нижней части навигации, а затем снова переключаюсь на Дом экран,

Я должен видеть там главный экран, но в настоящее время он показывает 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 с домашнего экрана, навигация по нижней вкладке не отображается для пользователя?


react-native reactjs stack-navigator react-native-android
person Neha    schedule 23.10.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

последний экран в 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
    }
  }
person hong developer    schedule 02.11.2019

arrow_upward
1
arrow_downward

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

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

export default createStackNavigator(
  {
    CHome:{
      screen: Home,
    },
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
  },
  {
    initialRouteName: 'CHome',
  },
);
person goldvenus    schedule 23.10.2019

arrow_upward
0
arrow_downward

Проблема

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

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

person Abdeen M.    schedule 23.10.2019
comment
Где я это назову? this.props.navigation.dispatch(resetAction); - person Neha; 23.10.2019
comment
для какой бы функции вы ни использовали перед вызовом this.props.navigation.navigate('Profile') - person Abdeen M.; 23.10.2019
comment
Но я не называю этим стек профилей this.props.navigation.navigate('Profile'), он находится в стеке навигации нижней вкладки. - person Neha; 23.10.2019
comment
Можете ли вы добавить образец той части кода, которую вы вызываете navigate('Profile'), к вопросу, чтобы я мог показать вам, что вы можете сделать - person Abdeen M.; 23.10.2019
comment
Конечно, но экран профиля вызывается из нижнего стека навигатора вкладок. - person Neha; 23.10.2019