無法通過 react-navigation 的導航道具黑白屏幕

Question

在我的組件ContactList中，我使用 map 渲染了一些項目。 每個項目都包含一個縮略圖。 當我單擊縮略圖時，我想導航到一個名為UserDetailsScreen的新屏幕。 在導航時，我還想將有關單擊其縮略圖的特定用戶的數據傳輸到下一個屏幕。

模態無法正常工作，因為如果我在 map 中使用多個模態將打開它。 所以我正在嘗試使用 react-navigation。

聯系人列表.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>
  );
};

此外，當我從該屏幕單擊縮略圖時，我應該將 go 返回到我之前的屏幕，以便我現在可以單擊另一個 object。

現在，我不斷收到一個錯誤，即navigation.getParam未定義。 我怎樣才能解決這個問題？

我相信我需要傳遞route道具，但我不確定如何使用它們以及是否應該在兩個屏幕或一個屏幕中傳遞它們

Answer 1

從路線道具獲取數據

喜歡

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設置的

Answer 2

您將參數傳遞給 UserDetailsScreen 的方法是正確的。

在之前版本的 react-navigation（1.x 到 4.x）中，您可以在“navigation.state.params”中獲取參數。

在 react-navigation 5 他們改變了它的實現。 現在您可以在“route.params”Object 中將參數傳遞到您的屏幕或組件。 您可以在下面查看代碼以供參考。

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>
);
};