0

Olá, tenho a seguinte estrutura:

  • Workouts
    • index.jsx
    • WorkoutInfo
      • index.jsx
  • Home
    • index.jsx
  • Profile
    • index.jsx
  • Notifications
    • index.jsx

É uma página Home normal e uma página Workouts que mostra todos os treinos, que quando o usuário clica em algum treino mostra a página WorkoutInfo, que mostra informações desse treino. Para fazer isso fiz 2 Rotas, uma Bottom Tabs e outra Stack:

AppTabs.jsx

const { Navigator, Screen } = createBottomTabNavigator();

const AppTabs = () => {
  return (
    <Navigator>
      <Screen name="Home" component={Home} />
      <Screen name="AllWorkouts" component={WorkoutStack} />
      <Screen name="Profile" component={Profile} />
      <Screen name="Notifications" component={Notifications} />
    </Navigator>
  );
}

export default AppTabs;

WorkoutStack.jsx

const { Navigator, Screen } = createStackNavigator();

const WorkoutStack = () => {
  return (
    <Navigator>
      <Screen name="AllWorkouts" component={Workouts} />
      <Screen name="WorkoutInfo" component={WorkoutInfo} />
    </Navigator>
  );
}

export default WorkoutStack;

Dentro do Workouts/index.jsx só fiz um onPress={() => navigate('WorkoutInfo', { workoutId: id })}, nada demais.

Qual o problema?

Dentro da minha Home, tem uma área em que alguns treinos são mostrados, somente alguns, e o usuário pode clicar e deveria ir para a mesma página "WorkoutInfo". Então escrevi idêntico ao que escrevi no Workouts/index.jsx, onPress{() => navigate('WorkoutInfo', { workoutId: id }) porém quando clico no treino, recebo um erro dizendo:

The action 'NAVIGATE' with payload {"name": "WorkoutInfo", "params": { workoutId: 6 }} was not handled by any navigator.

Do you have a screen named "WorkoutInfo"??

E eu simplesmente não sei o que estou fazendo de errado. Se alguém puder me dar uma luz.

1 Resposta 1

2

Navigators aninhados não recebem eventos de seus pais

Dada a seguinte estrutura:

Home (Home)
AllWorkouts (WorkoutStack)
    AllWorkouts (Workouts)
    WorkoutInfo (WorkoutInfo)
Profile (Profile)
Notifications (Notifications)

Têm-se dois níveis de navegação: a principal (Home, AllWorkouts, Profile e Notifications) e uma interna de AllWorkouts (AllWorkouts e WorkoutInfo).

Quando você está numa tela interna (e.g. WorkoutInfo) e utiliza navigation.navigate, um evento é emitido para ser recebido por algum Navigator, podendo ser tanto o mais interno (WorkoutStack) quanto o mais externo (AppTabs). O contrário não é verdade, por isso não é possível navegar de Home para WorkoutInfo do jeito que está na pergunta e surge o erro was not handled by any navigator.


Navegando para uma tela em um navigator aninhado

Para resolver o problema, duas coisas devem ser feitas:

  1. Parar de usar nomes duplicados (existem dois AllWorkouts) - isso não causará problemas diretamente, porém deixa o código mais confuso.

  2. Navegar de Home para o Navigator AllWorkouts, indicando qual a tela desejada e passando o parâmetro que essa tela precisa:

navigation.navigate('AllWorkouts', {
  screen: 'WorkoutInfo',
  params: { workoutId: id }
});

Para mais detalhes sobre navigators aninhados, leia toda a página da documentação Nesting navigators, lá existem exemplos de diversas situações que provavelmente lhe serão úteis.

1
  • Você salvou minha vida cara, valeu mesmo!
    – Ban
    Commented 9/10/2020 às 16:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .