Soy nuevo en React Native. Necesito que si hago clic en un botón, aparece una nueva página. Ya probé algunas cosas, pero tal vez el problema esté en otra parte. Pegaré mi código debajo. Por favor, ayúdame :)
Explicación adicional: quiero hacer clic en el botón y luego debería ir a otra página.
import React, { useState } from "react"; import { StyleSheet, Text, View, Image, TextInput, TouchableOpacity, Linking, Button } from "react-native"; import { useNavigation } from '@react-navigation/native'; import "react-native-gesture-handler"; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator, createAppContainer } from 'react-navigation'; export default function App() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( <View style={styles.container}> <Image style={styles.image} source={require("./assets/logo.png")} /> <StatusBar style="auto" /> <View style={styles.inputView}> <TextInput style={styles.TextInput} placeholder="Benutzername" onChangeText={(email) => setEmail(email)} /> </View> <Button style={styles.loginBtn} title="Go to Profile" onPress={() => this.props.navigation.navigate('Profile')} /> </View> ); } ```Podría ser esto útil para usted:
Versión de MyNavigation
@react-navigation/native": "^5.9.8" @react-navigation/stack": "^5.14.9"Ejemplo
import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'; //Navigation import import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; //Screen One const ScreenOne = props => { //onPress To Navigate const onPress = () => { props.navigation.navigate('ScreenTwo'); }; return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <TouchableOpacity onPress={onPress}> <Text>Hello From Screen One</Text> </TouchableOpacity> </View> ); }; //Screen Two const ScreenTwo = () => { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <Text>Screen Two</Text> </View> ); }; const App = () => { //const const Stack = createStackNavigator(); return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="ScreenOne" component={ScreenOne} /> <Stack.Screen name="ScreenTwo" component={ScreenTwo} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;