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.