Question

我正在尝试使用本机导航从登录屏幕导航到产品页面。我正在使用Firebase进行身份验证。导航库已在我的app.js中设置

我创建了一个onpress函数，该函数应从登录屏幕导航到我的产品屏幕，但出现此错误

console.error: The action 'NAVIGATE' with payload {"name":"Product","params":{"user":{"email":"me@me3.com","firstName":"collins","id":"u6JpcHjdRXgFT24MgwoZERIMDer2","lastName":"e"}}} was not handled by any navigator.

Do you have a screen named 'Product'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

我在做什么错了？

这是我的app.js

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react'
import { firebase } from './src/firebase/config'
import { NavigationContainer} from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { LoginScreen,  RegistrationScreen,ProductScreen } from './src/screens'
import {decode, encode} from 'base-64'
if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {

  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null)

  useEffect(() => {
    const usersRef = firebase.firestore().collection('users');
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        usersRef
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data()
            setLoading(false)
            setUser(userData)
          })
          .catch((error) => {
            setLoading(false)
          });
      } else {
        setLoading(false)
      }
    });
  }, []);

  if (loading) {
    return (
      <></>
    )
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        { user ? (
          <Stack.Screen name="Product">
            {props => <ProductScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我已经创建了index.js来导出不同的屏幕

export { default as LoginScreen } from './LoginScreen/LoginScreen'

export { default as ProductScreen } from './ProductScreen/ProductScreen'

export { default as RegistrationScreen } from './RegistrationScreen/RegistrationScreen'

这是我的登录屏幕

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View, ImageBackground } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';
import { firebase } from '../../firebase/config';


export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    console.log(navigation)

    const onFooterLinkPress = () => {
        navigation.navigate("Registration")
    }

    const onLoginPress = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        navigation.navigate('Product', {user: user})
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

    return (
        <ImageBackground source={require('../../../assets/backgroundCopySilk.jpg')} style={styles.backgroundImage}>
        <View style={styles.container}>
            <KeyboardAwareScrollView
                style={{ flex: 1, width: '100%' }}
                keyboardShouldPersistTaps="always">
                <Image
                    style={styles.logo}
                    source={require('../../../assets/logoCopy.png')}
                />
                <TextInput
                    style={styles.input}
                    placeholder='E-mail'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholderTextColor="#aaaaaa"
                    secureTextEntry
                    placeholder='Password'
                    onChangeText={(text) => setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => onLoginPress()}>
                    <Text style={styles.buttonTitle}>Log in</Text>
                </TouchableOpacity>
                <View style={styles.footerView}>
                    <Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
                </View>
            </KeyboardAwareScrollView>
        </View>
        </ImageBackground>
    )
}

最后这是我的产品屏幕

import React from 'react';
import { Image, Text, TextInput, TouchableOpacity, View,ImageBackground } from 'react-native'
import styles from './styles';
import { firebase } from '../../firebase/config';
import { auth } from 'firebase';



export default function ProductScreen({navigation}){

    const logOutPress = () => {
        auth()
        .signOut()
        .then(() => alert("You have signed out"))
        navigation.navigate("Login")
    };
    return(
        <View>
<Text>Product Screen</Text>
<TouchableOpacity
onPress={()=> logOutPress()}>
<Text>Log Out</Text>
</TouchableOpacity>
        </View>
    )
};

Answer 1

从文档中

请注意，使用此类设置时，您无需通过到Home屏幕。当navigation.navigate('Home')变成Home时，React Navigation将自动导航到isSignedIn屏幕。

因此，登录后，需要将true状态设置为适当的值，该状态将自动导航到正确的屏幕。您不应该手动user。

https://reactnavigation.org/docs/auth-flow#how-it-will-work

反应本机导航找不到屏幕

1 个答案: