TypeError：未定义不是对象（评估＆＃x27; props.route＆＃x27;）

Question

一直在尝试在我的React应用程序上制作两个不同的用户，但是我使用道具遇到问题来连接屏幕。当我按“没有帐户”时，我会遇到错误。是否有其他没有道具的方法来执行此操作，或者是否有任何解决方案？ 感谢任何建议。 谢谢

Inigupscreen

import React,{useState, useEffect} from 'react'
import { View, Text ,Image,StyleSheet,KeyboardAvoidingView,TouchableOpacity,ActivityIndicator,ScrollView} from 'react-native'
import { TextInput,Button } from 'react-native-paper';
import {launchImageLibrary} from 'react-native-image-picker';
import storage from '@react-native-firebase/storage'
import auth from '@react-native-firebase/auth'
import firestore from '@react-native-firebase/firestore'


const SignupScreen =({navigation,route,props}) =>{
    const [email,setEmail] = useState('')
    const [name,setName] = useState('')
    const [password,setPassword] = useState('')
    const [image,setImage] = useState(null)
    const [showNext,setShowNext] = useState(false)
    const [loading,setLoading] = useState(false)
    
    if(loading){
        return  <ActivityIndicator size="large" color="#00ff00" />
    }
    const userSignup = async ()=>{
        setLoading(true)
        if(!email || !password || !name){
               alert("please add all the field")
               return 
        }
        try{
          const result =  await auth().createUserWithEmailAndPassword(email,password)
            firestore().collection('users').doc(result.user.uid).set({
                name:name,
                email:result.user.email,
                uid:result.user.uid,
                pic:image,
                status:"online"
            })  
            setLoading(false)
        }catch(err){
            alert("something went wrong")
        }
       
        
    }
    
    const type=props.route.params.type

 // console.log(type,"type");

     useEffect(()=>{
     allUsers()
 },[])
    
 if(type=='Doctor'){

 
 return (
     <ScrollView>

        
        <KeyboardAvoidingView behavior="position">
            <View style={styles.box1}>
               
                <Image style={styles.img} source={require('../assets/hee.png')} />
            </View>
            <View style={styles.box2}>
                {!showNext && 
                <>
                 <TextInput
                 label="Email"
                 value={email}
                 onChangeText={(text)=>setEmail(text)}
                 mode="outlined"
                />
                <TextInput
                 label="password"
                 mode="outlined"
                 value={password}
                 onChangeText={(text)=>setPassword(text)}
                 secureTextEntry
                />
                 <TextInput
                 label="Full Name"
                 mode="outlined"
                />
                 <TextInput
                 label="Address"
                 mode="outlined"
                />
                 <TextInput
                 label="Contact Number"
                 mode="outlined"
                 keyboardType='numeric'
                />
                </>
                }
               
               {showNext ?
                <>
                 <TextInput
                 label="Name"
                 value={name}
                 onChangeText={(text)=>setName(text)}
                 mode="outlined"
                />
                
                <Button
                mode="contained"
                style={{marginTop:20}}
                onPress={()=>userSignup()}
                >Signup</Button>

               <TouchableOpacity style={{textAlign:"center", marginTop:25,marginLeft:115}} onPress={()=>navigation.goBack()}>
                   <Text>
                       Go Back
                   </Text>
               </TouchableOpacity>

                </>
                :
                 <Button
                 style={{marginTop:20}}
                mode="contained"
                onPress={()=>setShowNext(true)}
                >Next</Button>
                }

              <TouchableOpacity onPress={()=>props.navigation.goBack()}><Text style={{textAlign:"center", marginTop:25}}>Already have an account ?</Text></TouchableOpacity>
            </View>
        </KeyboardAvoidingView>
        </ScrollView>
    )
}
}






export default SignupScreen

const styles = StyleSheet.create({
    text:{
        fontSize:22,
        color:"green",
        margin:15
    },
    img:{
        width:250,
        height:250
    },
    box1:{
        alignItems:"center"
    },
    box2:{
    width:"70%",
        justifyContent:"center",
        height:"50%",
        margin:20,
        marginLeft:55
    }
 });

Main

import React,{useState} from 'react'
import { View, Text ,Image,StyleSheet,KeyboardAvoidingView,TouchableOpacity,ActivityIndicator} from 'react-native'
import { TextInput,Button } from 'react-native-paper';
import auth from '@react-native-firebase/auth'


const Main =props=> {
    const [email,setEmail] = useState('')
    const [password,setPassword] = useState('')
    const [loading,setLoading] = useState(false)
    if(loading){
        return  <ActivityIndicator size="large" color="red" />
    }
    const userLogin = async ()=>{
        setLoading(true)
        if(!email || !password){
               alert("please add all the field")
               return 
        }
        try{
          const result =  await auth().signInWithEmailAndPassword(email,password)
            setLoading(false)
        }catch(err){
            alert("something went wrong")
        }
       

    }
    return (
        <KeyboardAvoidingView behavior="position">
            <View style={styles.box1}>
                <Image style={styles.img} source={require('../assets/hee.png')} />
            </View>
            <View style={styles.box2}>
            
                
                 <Button
                mode="contained"
                onPress={()=>{userLogin(),{type:"Doctor"}}}
                >Doctor</Button>
                
                 <Button
                mode="contained"
                onPress={()=>{userLogin(),{type:"User"}}}
                >User</Button>
                <TouchableOpacity 
                onPress={()=>props.navigation.navigate('signup')}>
                    <Text style={{textAlign:"center"}}>
                        Dont have an account ?
                        </Text>
                        </TouchableOpacity>
               
            </View>
        </KeyboardAvoidingView>
    )
}

export default Main
const styles = StyleSheet.create({
    text:{
        fontSize:22,
        color:"red",
        margin:10
    },
    img:{
        width:250,
        height:250
    },
    box1:{
        alignItems:"center"
    },
    box2:{
        paddingHorizontal:40,
        justifyContent:"space-evenly",
        height:"50%"
    }
 });
 

Answer 1

props 没有定义，因为您已经破坏了它。因此，您可以简单地设置类型变量：

const type = route.params.type

Answer 2

正如 @user456所建议的那样，您不需要使用 props.route ，因为您已经在破坏了道具。

在您的 Inbeupscreen

const SignupScreen =({navigation,route}) =>{
  const { type } = route.params;
  ...
  if(type === "Doctor")
    // keep your current code
  else
   // handle if any other type is expected
}

还会在您的 Main 文件中更改

  <TouchableOpacity onPress={()=>navigation.goBack()}> //removed props
    <Text style={{textAlign:"center", marginTop:25}}>
      Already have an account ?
    </Text>
  </TouchableOpacity>

当时，您将必须传递 type param当您导航到 signupscreen 。

更改没有帐户按钮onpress

<TouchableOpacity 
  onPress={()=> props.navigation.navigate('signup', {type: "Doctor"})} // passing Doctor type as route param
>
  <Text style={{textAlign:"center"}}>
    Dont have an account ?
  </Text>
</TouchableOpacity>

您可以阅读有关在 https://reactnavigation.org/docs/params