Javascript 使用getParamas在屏幕之间传递数据

我在

ContactList

中呈现地图中的一些项目，单击缩略图后，我想导航到一个新屏幕

UserDetailsScreen

，这样关于单击项目的数据也会被传递

以前我使用modals，但现在我尝试切换到react导航

ContactList.tsx：

export const ContactList: React.FunctionComponent<UserProps> = ({
  data,
  onDeleteContact,
}) => {
  const [isUserVisible, setIsUserVisible] = useState(false);
  //const [visibleUser, setVisibleUser] = useState<any>();
  const navigation = useNavigation();

  return (
    <View style={styles.users}>
      {data.users.nodes[0].userRelations.map(
        (item: { relatedUser: RelatedUser; id: number }) => {
          const numberOfFriends = item.relatedUser.userRelations.length;
          const numberPlate = 'WHV AB 123';
          return (
            <View style={styles.item} key={item.id}>
              {/* <TouchableOpacity onPress={() => setIsUserVisible(true)}> */}
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate('UserDetailsScreen', {
                    firstName: item.relatedUser.firstName,
                    rating: item.relatedUser.rating,
                    numberOfFriends: numberOfFriends,
                    onDeleteContact: onDeleteContact,
                    isUserVisible: isUserVisible,
                    setIsUserVisible: setIsUserVisible,
                    numberPlate: numberPlate,
                    navigation: navigation,
                  })
                }>
                <Thumbnail
                  }}></Thumbnail>
              </TouchableOpacity>
              <View style={styles.nameNumber}>
                <Text style={styles.userName}>{userName}</Text>
              </View>
              {/* <UserDetails
                firstName={item.relatedUser.firstName}
                rating={item.relatedUser.rating}
                numberOfFriends={numberOfFriends}
                onDeleteContact={onDeleteContact}
                isUserVisible={isUserVisible}
                setIsUserVisible={setIsUserVisible}
                  numberPlate={numberPlate}>
                </UserDetails> */}
            </View>
          );
        },
      )}
    </View>
  );
};

export const ContactList:React.FunctionComponent=({
数据，
联系方式：，
}) => {
const[isUserVisible，setIsUserVisible]=useState（false）；
//const[visibleUser，setVisibleUser]=useState（）；
const navigation=useNavigation（）；
返回(
{data.users.nodes[0].userRelations.map(
（项：{relatedUser:relatedUser；id:number}）=>{
const numberOfFriends=item.relatedUser.userRelations.length；
常数编号板='WHV AB 123'；
返回(
{/*setIsUserVisible（true）}>*/}
navigation.navigate（'UserDetailsScreen'{
firstName:item.relatedUser.firstName，
评级：item.relatedUser.rating，
numberOfFriends:numberOfFriends，
onDeleteContact:onDeleteContact，
isUserVisible:isUserVisible，
setIsUserVisible:setIsUserVisible，
数字板：数字板，
导航：导航，
})
}>
{userName}
{/* 
*/}
);
},
)}
);
};

UserDetailsScreen：

export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({
  firstName,
  rating,
  numberOfFriends,
  numberPlate,
  onDeleteContact,
  navigation,
//   isUserVisible,
//   setIsUserVisible,
}) => {
//const navigation = useNavigation();
const fName = navigation.getParam('firstName')
  return (
    // <Modal visible={isUserVisible}>
      <View style={styles.container}>
        <View>
          <TouchableOpacity
            style={styles.cross}
            //onPress={() => setIsUserVisible(false)}>
              onPress={() => navigation.navigate('Whitelist')}>
            <Thumbnail></Thumbnail>
          </TouchableOpacity>
        </View>
        <View style={styles.searchLocationContainer}>
          <UserInfoContainer
            firstName={firstName}
            rating={rating}
            numberPlate={numberPlate}
            numberOfFriends={numberOfFriends}></UserInfoContainer>
        </View>
      </View>
    // </Modal>
  );
};

导出常量UserDetailsScreen:React.FunctionComponent=({ 名字， 评级 许多朋友， 数字板， 联系方式：， 航行 //isUserVisible， //setIsUserVisible， }) => { //const navigation=useNavigation（）； const fName=navigation.getParam（'firstName'） 返回( // setIsUserVisible（false）}> onPress={（）=>navigation.navigate（'Whitelist'）}> // ); }; 类似地，当我点击这个屏幕上的缩略图时，我想回到上一页，在那里我可以点击另一个对象

---

但是，我不断收到一个错误，

navigation.getParam

未定义。如何解决此问题？

您好，您将在中的导航参数中收到发送的数据

---

props.route.params

您能复制并更改我的代码吗？我真的不知道如何/在哪里使用

props.route.params

。请注意，我使用的是TypeScription，您只需要使用这个``让fName=props.route.params``到您正在导航的屏幕。在您的情况下，屏幕为

UserDetailsScreen