[英]TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)
I am trying to fetch the data from one screen to another through props.naviagtion.getParam, however I am getting this error :'TypeError: props.navigation.getParam is not a function.我正在尝试通过 props.naviagtion.getParam 将数据从一个屏幕获取到另一个屏幕,但是我收到此错误:'TypeError: props.navigation.getParam 不是函数。 (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)'.
(在 'props.navigation.getParam('docId')' 中,'props.navigation.getParam' 未定义)'。 I have shared the code;
我已经分享了代码; if someone is familiar with the problem, your help will be appreciated!
如果有人熟悉这个问题,您的帮助将不胜感激!
import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View, FlatList, ScrollView, Pressable } from 'react-native'
import { auth } from '../firebase'
import { DOC } from '../Data/dummy-data'
const HomeScreen = props => {
const navigation = useNavigation()
const handleSignOut = () => {
auth
.signOut()
.then(() => {
navigation.replace("Login")
})
.catch(error => alert(error.message))
}
const renderGridItem = (itemData) => {
return (
<TouchableOpacity
style={styles.grid}
onPress={ () => {
navigation.navigate('Doctors',{docId:itemData.item.id})
}}>
<View>
<Text>
{itemData.item.title}
</Text>
</View>
</TouchableOpacity>
)
}
return (
<View style={styles.container}>
<FlatList keyExtractor={(item, index) => item.id}
data={DOC}
renderItem={renderGridItem} />
<Text style={styles.txt}>Email: {auth.currentUser?.email}</Text>
<TouchableOpacity
onPress={handleSignOut}
style={styles.button}
>
<Text style={styles.buttonText}>Sign out</Text>
</TouchableOpacity>
</View>
)
}
HomeScreen.navigationOptions = {
headerTitle: 'All Doctors',
headerStyle: {
backgroundColor: 'red'
},
headerTintColor: 'red'
};
export default HomeScreen
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
backgroundColor: '#0782F9',
width: '60%',
padding: 15,
borderRadius: 10,
alignItems: 'center',
marginTop: 40,
},
buttonText: {
color: 'white',
fontWeight: '700',
fontSize: 16,
},
txt:{
fontSize:20,
color:'black',
alignItems:'flex-start'
},
screen:{
marginTop:10,
width:'30%',
height:2,
borderRadius:10,
backgroundColor:'red',
},
grid:{
flex:1,
margin:15,
height:150
},
})
/////////////Doctor.js////////////// ////////////Doctor.js/////////////
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { DOC } from '../Data/dummy-data'
const Doctors = props => {
const docId = props.navigation.getParam('docId')
const selectedCategory = DOC.find(doc => doc.id === docId)
return (
<View>
<Text>{selectedCategory.title}</Text>
</View>
)
}
export default Doctors
const styles = StyleSheet.create({})
There are two things that you need to take care of.您需要注意两件事。 First, if
Doctors
is not a screen in a navigator, then the route
object will not be passed to it by the navigation framework.首先,如果
Doctors
不是导航器中的屏幕,则导航框架不会将route
对象传递给它。 Second, if you are using react-navigation v5 or higher
, then you access the params via the route object
.其次,如果您使用
react-navigation v5 or higher
,则可以params via the route object
。
Since you navigate to Doctors
, it should be a screen defined in the navigator, thus you can access it as follows.由于您导航到
Doctors
,它应该是导航器中定义的屏幕,因此您可以按如下方式访问它。
const Doctors = props => {
// destructure
const { docId } = props.route.params
const selectedCategory = DOC.find(doc => doc.id === docId)
return (
<View>
<Text>{selectedCategory.title}</Text>
</View>
)
}
If you have a component that is not a screen inside a navigator, then you can use the useRoute
hook.如果您有一个不是导航器中的屏幕的组件,那么您可以使用
useRoute
挂钩。
const route = useRoute()
const { docId } = route.params
References: The last version for getParams
is v4
as documented here .参考:
getParams
的最后一个版本是v4
,如此处所述。 This has changed for higher versions as documented here .这已针对此处记录的更高版本进行了更改。 The useRoute hook is documented here .
此处记录了 useRoute 挂钩。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.