[英]unable to pass navigation props b/w screens with react-navigation
In my component ContactList
, I have rendered sone items using a map.在我的组件
ContactList
中,我使用 map 渲染了一些项目。 Each item contains a thumbnail.每个项目都包含一个缩略图。 When I click on the thumbnail, I want to navigate to a new screen called
UserDetailsScreen
.当我单击缩略图时,我想导航到一个名为
UserDetailsScreen
的新屏幕。 While I navigate, I also want to transfer data to the next screen about the particular user whose thumbnail was clicked on.在导航时,我还想将有关单击其缩略图的特定用户的数据传输到下一个屏幕。
Modals don't work properly since multiple modals will open if I used it in a map.模态无法正常工作,因为如果我在 map 中使用多个模态将打开它。 So I am trying to use react-navigation.
所以我正在尝试使用 react-navigation。
ContactList.tsx:联系人列表.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>
);
};
UserDetailsScreen:用户详情屏幕:
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>
);
};
Additionally, when I click on the thumbnail from this screen, I should go back to my previous screen such that I can click on another object now.此外,当我从该屏幕单击缩略图时,我应该将 go 返回到我之前的屏幕,以便我现在可以单击另一个 object。
For now, I keep getting an error that navigation.getParam
is undefined.现在,我不断收到一个错误,即
navigation.getParam
未定义。 How can I fix this?我怎样才能解决这个问题?
I believe I need to pass the route
props but I'm not sure how to use them and whether I should pass them in both screens or one我相信我需要传递
route
道具,但我不确定如何使用它们以及是否应该在两个屏幕或一个屏幕中传递它们
get data from route props从路线道具获取数据
like喜欢
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
if you can navigate to UserDetailsScreen
then you don't need to pass any route.如果您可以导航到
UserDetailsScreen
,那么您不需要通过任何路线。 because navigation and it's property are set with UserDetailsScreen
因为导航和它的属性是用
UserDetailsScreen
设置的
Your method of passing the params to UserDetailsScreen is correct.您将参数传递给 UserDetailsScreen 的方法是正确的。
In the previous version of react-navigation(1.x to 4.x) you can get params in "navigation.state.params".在之前版本的 react-navigation(1.x 到 4.x)中,您可以在“navigation.state.params”中获取参数。
In react-navigation 5 they have changed its implementation.在 react-navigation 5 他们改变了它的实现。 Now you can get params passed to your screen or component in "route.params" Object.
现在您可以在“route.params”Object 中将参数传递到您的屏幕或组件。 You can check the code for reference below.
您可以在下面查看代码以供参考。
type UserProps = {
route: any,
navigation: any,
};
export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({
route,navigation
}) => {
const {
firstname,
rating,
numberOfFriends,
numberPlate,
onDeleteContact,
} = route.params;
return (
<View style={styles.container}>
<View>
<TouchableOpacity
style={styles.cross}
//onPress={() => setIsUserVisible(false)}>
onPress={() => navigation.navigate('Whitelist')}>
<Thumbnail />
</TouchableOpacity>
</View>
<View style={styles.searchLocationContainer}>
<UserInfoContainer
firstName={firstName}
rating={rating}
numberPlate={numberPlate}
numberOfFriends={numberOfFriends}
/>
</View>
</View>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.