javascript - 使用 getParamas 在屏幕之间传递数据
问题描述
我在我的地图中渲染了一些项目,ContactList
单击缩略图后,我想导航到一个新屏幕UserDetailsScreen
,以便也传递有关单击项目的数据。
以前我使用的是模态,但现在我试图切换到反应导航。
联系人列表.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 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>
);
};
同样,当我单击此屏幕上的缩略图时,我想返回上一个页面,在该页面中我可以单击另一个对象。
但是,我不断收到navigation.getParam
未定义的错误。我怎样才能解决这个问题?
解决方案
嗨,您将获得在导航参数中发送的数据
props.route.params
推荐阅读
- vue.js - 如何在生产模式下推送到 netlify [Nuxt JS]
- mongodb - Handlebars Form no run Mongodb delete function - typeError gfs.deleteOne
- java - 如何在 Java 中创建文本文件的 ArrayList?
- reactjs - React Bootstrap Navbar 不会右对齐
- macos - 如何预缓存 NSImage 以在 NSImageView 中显示
- json - Dataweave - 过滤字段值是否为空
- vb.net - 解析文本文件记录多行
- scala - Scala:打印函数定义的内容
- vb.net - 如何在VB.NET中获取网络上所有计算机的ipv4地址
- javascript - 属性值自动插入双引号内