Блог

Привет, я пытаюсь создать приложение с аутентификацией firebase. на моем экране регистрации, как только все вставлено и подтверждено, я нажимаю кнопку «зарегистрироваться» и получаю ошибку TypeError: props.handler-это не функция, это мой код для экрана регистрации

Signup.js

 import { StatusBar } from 'expo-status-bar'; import React, { useEffect, useState } from 'react' import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base'; import { FontAwesome5 } from '@expo/vector-icons'; import { useNavigation } from '@react-navigation/native'; import { alignContent, flex, flexDirection, width } from 'styled-system';    export function Signin(props) {  const navigation = useNavigation();  const [email,setEmail] = useState()  const [password, setPassword] = useState()    useEffect( () =gt; {  if( props.auth === true ) {  navigation.reset({ index: 0, routes: [ {name: 'Home'} ] })  }  }, [props.auth] )   return (  lt;View style={styles.container}gt;  lt;View style={styles.Middle}gt;  lt;Text style={styles.LoginText}gt;Loginlt;/Textgt;  lt;/Viewgt;  lt;View style={styles.text2}gt;  lt;Textgt;Don't have an account? lt;/Textgt;  lt;TouchableOpacity onPress={() =gt; navigation.navigate("Signup")} gt;lt;Text style={styles.signupText}gt; Sign uplt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;   {/* Username or Email Input Field */}  lt;View style={styles.buttonStyle}gt;    lt;View style={styles.emailInput}gt;  lt;Input  InputLeftElement={  lt;Icon  as={lt;FontAwesome5 name="user-secret" /gt;}  size="sm"  m={2}  _light={{  color: "black",  }}  _dark={{  color: "gray.300",  }}  /gt;  }  variant="outline"  onChangeText={ (val) =gt; setEmail(val) }     placeholder="Username or Email"  _light={{  placeholderTextColor: "blueGray.400",  }}  _dark={{  placeholderTextColor: "blueGray.50",  }}   /gt;  lt;/Viewgt;  lt;/Viewgt;   {/* Password Input Field */}  lt;View style={styles.buttonStyleX}gt;    lt;View style={styles.emailInput}gt;  lt;Input  InputLeftElement={  lt;Icon  as={lt;FontAwesome5 name="key" /gt;}  size="sm"  m={2}  _light={{  color: "black",  }}  _dark={{  color: "gray.300",  }}  /gt;  }  variant="outline"  onChangeText={ (val) =gt; setPassword(val) }    secureTextEntry={true}  placeholder="Password"  _light={{  placeholderTextColor: "blueGray.400",  }}  _dark={{  placeholderTextColor: "blueGray.50",  }}  /gt;  lt;/Viewgt;  lt;/Viewgt;   {/* Button */}  lt;View style={styles.buttonStyle}gt;  lt;Button style={styles.buttonDesign}  onPress={ () =gt; { props.handler(username, email,password) }}gt;  LOGIN  lt;/Buttongt;  lt;/Viewgt;   {/* Line */}  lt;View style={styles.lineStyle}gt;  lt;View style={{flex: 1, height: 1, backgroundColor: 'black'}} /gt;  lt;Viewgt;  lt;Text style={{width: 50, textAlign: 'center'}}gt;Orlt;/Textgt;  lt;/Viewgt;  lt;View style={{flex: 1, height: 1, backgroundColor: 'black'}} /gt;  lt;/Viewgt;   {/* Box */}  lt;View style={styles.boxStyle}gt;  lt;Box   onPress={() =gt; navigation.navigate("#")} // for navigation   style={{height:80, width:80}}   shadow={3}  _light={{  backgroundColor: "gray.50",  }}  _dark={{  backgroundColor: "gray.700",  }}  gt;  lt;AspectRatio ratio={1 / 1}gt;  lt;Image  roundedTop="lg"  source={{  uri: "https://www.transparentpng.com/thumb/google-logo/colorful-google-logo-transparent-clipart-download-u3DWLj.png",  }}  alt="image"  /gt;  lt;/AspectRatiogt;  lt;/Boxgt;  lt;Box   onPress={() =gt; navigation.navigate("#")} // for navigation  style={styles.imageStyle}  shadow={3}  _light={{  backgroundColor: "gray.50",  }}  _dark={{  backgroundColor: "gray.700",  }}  gt;  lt;AspectRatio ratio={1 / 1}gt;  lt;Image    roundedTop="lg"  source={{  uri: "https://www.transparentpng.com/thumb/facebook-logo-png/photo-facebook-logo-png-hd-25.png",  }}  alt="image"  /gt;  lt;/AspectRatiogt;  lt;/Boxgt;  lt;Box   onPress={() =gt; navigation.navigate("#")} // for navigation  style={styles.imageStyle}  shadow={3}  _light={{  backgroundColor: "gray.50",  }}  _dark={{  backgroundColor: "gray.700",  }}  gt;  lt;AspectRatio ratio={1 / 1}gt;  lt;Image    roundedTop="lg"  source={{  uri: "https://www.transparentpng.com/thumb/twitter/bird-twitter-socialmedia-icons-png-5.png",  }}  alt="image"  /gt;  lt;/AspectRatiogt;  lt;/Boxgt;  lt;Box   onPress={() =gt; navigation.navigate("#")} // for navigation  style={styles.imageStyle}  shadow={3}  _light={{  backgroundColor: "gray.50",  }}  _dark={{  backgroundColor: "gray.700",  }}  gt;  lt;AspectRatio ratio={1 / 1}gt;  lt;Image    roundedTop="lg"  source={{  uri: "https://www.transparentpng.com/thumb/apple-logo/RRgURB-apple-logo-clipart-hd.png",  }}  alt="image"  /gt;  lt;/AspectRatiogt;  lt;/Boxgt;  lt;/Viewgt;  lt;StatusBar style="auto" /gt;  lt;/Viewgt;  ); }  export default () =gt; {  return (  lt;NativeBaseProvidergt;    lt;Signin /gt;    lt;/NativeBaseProvidergt;  ) }    

И это мой код для App.js App.js

 import { StatusBar } from 'expo-status-bar'; import React, { useState, useEffect } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack';  // components import Signup from './components/Signup' import Signin from './components/Signin' import Home from './components/Home';  import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; // firebase import { firebaseConfig } from './Config'; import {initializeApp,} from 'firebase/app' import { getAuth, createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword, signOut } from "firebase/auth"  import {   initializeFirestore,   getFirestore,   setDoc,   doc,   addDoc,   collection,  query,   where,   onSnapshot  } from 'firebase/firestore'   const FBapp = initializeApp( firebaseConfig) const FSdb = initializeFirestore(FBapp, {useFetchStreams: false}) const FBauth = getAuth()  initializeApp(firebaseConfig)   const Stack = createStackNavigator();     function App() {  const[ auth, setAuth ] = useState()  const[ user, setUser ] = useState()  const [signupError, setSignupError ] = useState()  const [signinError, setSigninError ] = useState()  const [ data, setData ] = useState()    useEffect(() =gt; {  onAuthStateChanged( FBauth, (user) =gt; {  if( user ) {   setAuth(true)   setUser(user)  // console.log( 'authed')  if( !data ) { getData() }  }  else {  setAuth(false)  setUser(null)  }  })  })   // useEffect( () =gt; {  // if( !data amp;amp; user ) {  // getData()  // }  // }, [data,auth, user])   const SignupHandler = ( email, password ) =gt; {  setSignupError(null)  createUserWithEmailAndPassword( FBauth, email, password )  .then( ( userCredential ) =gt; {   setUser(userCredential.user)  setAuth( true )  } )  .catch( (error) =gt; { setSignupError(error.code) })  }   const SigninHandler = ( email, password ) =gt; {  signInWithEmailAndPassword( FBauth, email, password )  .then( (userCredential) =gt; {  setUser(userCredential.user)  setAuth(true)  console.log( userCredential.user.uid)  })  .catch( (error) =gt; {   const message = (error.code.includes('/') ) ? error.code.split('/')[1].replace(/-/g, ' ') : error.code  setSigninError(message)   })  }  return (  lt;Stack.Navigator screenOptions={{headerShown: false}} gt;  lt;Stack.Screen name="Signup" options={{title: 'Sign up'}}gt;  { (props) =gt;   lt;Signup {...props}   handler={SignupHandler}   auth={auth}   error={signupError}   /gt; }  lt;/Stack.Screengt;  lt;Stack.Screen   name="Signin"   options={{  title:'Sign in'  }}  gt;  { (props) =gt;   lt;Signin {...props}   auth={auth}   error={signinError}   handler={SigninHandler}   /gt; }  lt;/Stack.Screengt;  lt;Stack.Screen name="Home" options={{  headerTitle: "Home",  headerRight: (props) =gt; lt;Signout {...props} handler={SignoutHandler} user={user}/gt;  }}gt;  { (props) =gt;   lt;Home {...props} auth={auth} add={addData} data={ data } /gt; }  lt;/Stack.Screengt;  lt;/Stack.Navigatorgt;  ); }    export default () =gt; {  return (  lt;NavigationContainergt;    lt;App /gt;    lt;/NavigationContainergt;  ) }  

В Signup.js, вы определяете подпись компонента, который принимает реквизиты в качестве аргумента. Затем вы экспортируете новый компонент, который отображает компонент Signin, завернутый в NativeBaseProvider:

 export default () =gt; {  return (  lt;NativeBaseProvidergt;  lt;Signin /gt;  lt;/NativeBaseProvidergt;  )  }  

Но этот экспортированный компонент не пересылает никаких реквизитов. Вот почему вы получаете эту ошибку при попытке вызвать props.handler в компоненте входа.

Вы должны передать реквизит при экспорте:

 export default (props) =gt; {  return (  lt;NativeBaseProvidergt;  lt;Signin {...props} /gt;  lt;/NativeBaseProvidergt;  )  }