Estoy creando una aplicación nativa de reacción y estoy bastante confundido acerca de cómo se produce la navegación de la página. Parece que tengo un problema en el que mi navegación salta una página.
<NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen component={HomeScreen} name="Home" /> <Stack.Screen component={FirstScreen} name="First" /> <Stack.Screen component={AssignWorkoutScreen} name="Third" /> <Stack.Screen component={SecondScreen} name="Second" /> </Stack.Navigator> </NavigationContainer>Mi objetivo es lograr la siguiente navegación a la que quiero ir desde Inicio -> Primera pantalla -> Segunda pantalla. Sin embargo, me encuentro con el problema de que cuando hago clic en la primera pantalla, salta inmediatamente de la primera pantalla a la segunda.
Código para el hogar:
class HomeScreen extends React.Component { render() { return ( <View> <Button title="First" onPress={() => this.props.navigation.push("First")} /> </View> ); } }Código para la primera pantalla:
class FirstScreen extends React.Component { render() { return ( <ScreenContainer> ... <Button title='hey' onPress={this.props.navigation.navigate("Second")}/> ... </ScreenContainer> ); } } Thank you for all your help!Está llamando a la función en el controlador onPress en lugar de pasarle una referencia para llamar más tarde.
<Button title='hey' onPress={this.props.navigation.navigate("Second")}/>A esto
<Button title='hey' onPress={() => this.props.navigation.navigate("Second")}/>