React Navigation params не сбрасывается

Question

У меня проблемы со сбросом параметров навигации на ноль в React Native.

MainTab
- Дом (стек)
- Разное (стек)
- Советы (стопка)

На вкладке «Главная» у меня есть кнопка для перехода на «Разное», но я хочу перейти на вкладку «Советы» по маршруту на «Разное».
Маршрутизация должна выглядеть так - (На главную -> Советы -> Разное)
Эта кнопка возвращает следующее с параметрами -

this.props.navigation.navigate('Tips', {backRoute: 'Home', routeImGoingNext: 'Misc'});

Когда эти параметры передаются, я отображаю кнопку «Назад» и кнопку «Пропустить» в навигационной панели «Советы» на основе параметров backRoute и routeImGoingNext, которые были переданы с кнопки на вкладке «Главная».

if(navigation.state.params && navigation.state.params.backRoute){
  return {
    headerLeft: (<HeaderBackButton onPress={()=>navigation.navigate(navigation.state.params.backRoute)}/> ),
    headerRight: (
      <TouchableOpacity onPress={()=>navigation.navigate(navigation.state.params.routeImGoingnext)}>
        <Text style={{paddingRight: 10}}> Skip </Text>
      </TouchableOpacity>
    )
  }
}

Моя проблема возникает при нажатии на вкладку «Советы» после того, как я уже нажал кнопку на вкладке «Главная». Параметры все еще установлены и, следовательно, отображают кнопку «Назад» и кнопку «Пропустить», но этих кнопок быть не должно, если я нажму на вкладку «Советы».

Есть идеи, как сбросить параметры при ручном нажатии на вкладки?

Answer 1

Вы попробуете проверить этот пост, решите вашу идею

https://reactnavigation.org/docs/en/stack-actions.html

Answer 2

Мне удалось очистить параметры, вручную создав функцию и установив параметры, которые передаются равными нулю. Функция clearParams вызывается при нажатии кнопки заголовка.

static navigationOptions = ({navigation}) => {

  clearParams = () => {
    navigation.setParams({backRoute: null, routeImGoingNext: null})
  }

  if(navigation.state.params && navigation.state.params.backRoute){  

    const { backRoute, routeImGoingNext } = navigation.state.params;

    return {
      headerLeft: (<HeaderBackButton onPress={()=>{navigation.navigate(backRoute), clearParams()}}/> ),
      headerRight: (
        <TouchableOpacity onPress={()=>{navigation.navigate(routeImGoingNext), clearParams() }}>
          <Text style={{paddingRight: 10}}> Skip </Text>
        </TouchableOpacity>
      )
    }
  }
 return;
}