我正在做一个应用程序,然后进入了在屏幕上导航的部分,这行代码是:导航('创建帐户');似乎有一个错误,特别是在调用“创建帐户”时,说没有重载匹配这个调用,但我无法发现错误,所以我不知道该怎么做。以下是代码:
import { useNavigation } from '@react-navigation/core';
import React from 'react';
import { SafeAreaView, Text, Image, TouchableOpacity, StyleSheet, Dimensions, TextInput, KeyboardAvoidingView, Platform } from 'react-native';
import abacatezinImg from '../assets/abacatezin.png';
export function LoginScreen(){
const navigation = useNavigation();
function handleCreate(){
navigation.navigate('CreateAccount');
}
return(
<SafeAreaView style={styles.container}>
<Image source={abacatezinImg} style={styles.abacatezin}/>
<Text style={styles.title}>
Faça seu login para começar
</Text>
<TextInput style={styles.input} placeholder="Email"/>
<TextInput style={styles.input} placeholder="Senha"/>
<TouchableOpacity >
<Text style={styles.botao1}>
Entrar
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleCreate}>
<Text style={styles.botao2}>
Criar conta
</Text>
</TouchableOpacity>
<Text style={styles.esquecenha}>
Esqueci minha senha
</Text>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
backgroundColor: '#FAFFF9',
},
abacatezin:{
marginTop: 58,
width: 30,
height: 36,
},
title:{
fontSize: 34,
fontWeight: '600',
lineHeight: 42,
marginTop: 45,
},
input:{
borderWidth: 1,
borderColor: '#7E9F70',
backgroundColor: '#FFFFFF',
width: 327,
height: 56,
borderRadius: 10,
fontSize: 18,
textAlign: 'left',
padding: 11,
marginTop: 32,
marginBottom: -12,
},
botao1:{
backgroundColor: '#7E9F70',
width: 327,
height: 53,
borderRadius: 37,
padding: 12,
paddingHorizontal: 121,
color: '#FFFFFF',
fontSize: 20,
fontWeight: '700',
marginTop: 44,
},
botao2:{
backgroundColor: '#FFFFFF',
width: 327,
height: 53,
borderRadius: 37,
padding: 12,
paddingHorizontal: 105,
borderWidth: 1,
color: '#7E9F70',
borderColor: '#7E9F70',
fontSize: 20,
fontWeight: '700',
marginTop: 14,
},
esquecenha:{
fontSize: 16,
fontWeight: '400',
lineHeight: 27,
borderBottomWidth: 1,
marginTop: 34,
}
});
和堆栈。路由:
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';
const stackRoutes = createStackNavigator();
const AppRoutes: React.FC = () => (
<stackRoutes.Navigator
/*headerMode="none"*/
screenOptions={{cardStyle: {backgroundColor: '#FFF'}, headerShown: false}}
>
<stackRoutes.Screen
name="LoginScreen"
component={LoginScreen}
/>
<stackRoutes.Screen
name="CreateAccount"
component={CreateAccount}
/>
</stackRoutes.Navigator>
)
export default AppRoutes;
1条答案
按热度按时间cu6pst1q1#
您忘记使用
<NavigationContainer />
Navigation Docs并且在
StackRoutes
上修改stackRoutes
。JSX组件应该从大写字母开始。