Question

嗨，我提交表单后得到的错误未定义，不是一个对象（正在评估“ navigation.navigate”）。我搜索了许多google / stackoverflow答案，但没有一个对我有帮助。

我不确定这是由Firebase还是实际的道具导航引起的。关于此的任何见解？???

请参见下面的代码：

// parent component

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import LoginForm from '../components/LoginForm';

const Login = () => {
    return (
        <View style={styles.mainWrapper}>
            <Image style={styles.logo} title="Logo" source={require('../assets/box.png')}/>
            <LoginForm/>
        </View>
    );
}

const styles = StyleSheet.create({
    logo: {
        width: 150,
        height: 150,
        marginTop: 55
    },
    mainWrapper: {
        display: "flex",
        alignItems: "center"
    }
});

export default Login;






// login form component

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Alert} from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';
import { firebaseConfig } from '../config';

if(!firebase.apps.length){
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
}

const auth = firebase.auth();

const LoginForm = ({navigation}) => {

    const [email,setEmail] = useState('');
    const [password, setPassword] = useState('');

    const signIn = async() => {
        try {
            let response = await auth.signInWithEmailAndPassword(email,password);
            if(response.user){
                Alert.alert('logged in' + response.user.email);
                navigation.navigate('Driver');
            }
        }catch(e){
            Alert.alert(e.message);
        }
    };

    return (
        <View style={styles.formView}>
            <TextInput
            value={email}
            placeholder="Email" 
            style={styles.input}
            onChangeText={userEmail => setEmail(userEmail)}
            autoCapitalize='none'
            keyboardType='email-address'
            autoCorrect={false}
            />

            <TextInput 
            value={password}
            placeholder="Password" 
            secureTextEntry={true} 
            style={styles.input}
            onChangeText={userPassword => setPassword(userPassword)}
            />

            <TouchableOpacity style={styles.submitBtn} title="Login" onPress={() => signIn()}>
                <Text style={styles.appButtonText}>Login</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    formView: {
        marginTop: 45,
        display: "flex",
        alignItems: "center",
    },
    input: {
        marginTop: 20,
        width: 300,
        height: 40,
        paddingHorizontal: 10,
        borderRadius: 5,
        backgroundColor: 'white',
    },
    submitBtn: {
        backgroundColor: "#FFE17D",
        color: "#E6646E",
        fontWeight: "bold",
        width: 150,
        height: 40,
        marginTop: 20,
        borderColor: "#E6646E",
        borderRadius: 5,
        display: "flex",
        justifyContent: "center",
        borderWidth: 1,
    },
    appButtonText: {
      fontSize: 18,
      color: "#E6646E",
      fontWeight: "bold",
      alignSelf: "center",
      textTransform: "uppercase"
    }
});

Answer 1

只有堆叠屏幕可以访问道具导航。您可以尝试将导航发送到LoginForm，但这仅在Login是一个堆栈屏幕时有效。

const Login = ({navigation}) => {
    return (
        <View style={styles.mainWrapper}>
            <Image style={styles.logo} title="Logo" source={require('../assets/box.png')}/>
            <LoginForm navigation={navigation}/>
        </View>
    );
}

或者您可以在useNavigation挂钩中查看

Firebase身份验证后收到错误消息“未定义不是对象（正在评估'navigation.navigate'）”-反应本机

1 个答案: