在我的组件中 ContactList
,我已经使用 map 渲染了一些项目。每个项目都包含一个缩略图。当我点击缩略图时,我想导航到一个名为 UserDetailsScreen
的新屏幕。 .在导航时,我还想将有关单击缩略图的特定用户的数据传输到下一个屏幕。
模态无法正常工作,因为如果我在 map 中使用它会打开多个模态。所以我正在尝试使用 react 导航。
联系人列表.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>
);
};
用户详细信息屏幕:
type UserProps = {
//data: UsersQueryHookResult,
firstName: string;
rating: number;
numberOfFriends: number;
numberPlate: string;
onDeleteContact: (id: number) => void;
navigation: any;
};
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
未定义。我怎样才能解决这个问题?我相信我需要通过
route
Prop ,但我不确定如何使用它们以及我是否应该在两个屏幕或一个屏幕中传递它们
最佳答案
从路由 Prop 中获取数据
喜欢
type UserProps = {
//data: UsersQueryHookResult,
firstName: string;
rating: number;
numberOfFriends: number;
numberPlate: string;
onDeleteContact: (id: number) => void;
navigation: any;
route: any;
};
export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({
firstName,
rating,
numberOfFriends,
numberPlate,
onDeleteContact,
navigation,
route,
// isUserVisible,
// setIsUserVisible,
})....
route.params.firstName
如果您可以导航到
UserDetailsScreen
那么你不需要通过任何路线。因为导航及其属性设置为 UserDetailsScreen
关于javascript - 无法通过 react 导航传递导航 Prop 黑白屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62483418/