[英]React Native Button navigate to another page
我是 React Native 的新手。 我需要如果我点击一个按钮,就会出现一个新页面。 我已经尝试了一些事情,但也许问题出在其他地方。 我将在下面粘贴我的代码。 请帮我:)
进一步说明:我想点击按钮然后它应该 go 到另一个页面。
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>
);
}
```
可能对您有帮助:
我的导航版本
@react-navigation/native": "^5.9.8"
@react-navigation/stack": "^5.14.9"
例子
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.