TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)

Question

我试图通过 props.naviagtion.getParam 将数据从一个屏幕获取到另一个屏幕，但是我收到此错误：'TypeError: props.navigation.getParam 不是一个函数。（在“props.navigation.getParam('docId')”中，'props.navigation.getParam' 未定义）。我已经分享了代码；如果有人熟悉该问题，将不胜感激！

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/////////////

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({})

Answer 1

您需要注意两件事。首先，如果 Doctors 不是导航器中的屏幕，则导航框架不会将 route 对象传递给它。其次，如果您使用的是 react-navigation v5 or higher，那么您访问的是 params via the route object.

既然你导航到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>
  )
}

如果导航器中的组件不是屏幕，则可以使用 useRoute 挂钩。

const route = useRoute()
const { docId } = route.params

参考资料：getParams 的最后一个版本是 v4，记录在案 here. This has changed for higher versions as documented here. The useRoute hook is documented here。

TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)

TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('docId')', 'props.navigation.getParam' is undefined)

javascript

reactjs

react-native

react-navigation

react-props