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

【问题标题】：pass data between screens with getParamas使用 getParamas 在屏幕之间传递数据
【发布时间】：2020-10-10 01:51:10
【问题描述】：

我在 ContactList 的地图中渲染了一些项目，单击缩略图后，我想导航到新屏幕 UserDetailsScreen，这样有关单击项目的数据也会传递。

以前我使用的是模式，但现在我尝试切换到反应导航。

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 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 未定义的错误。我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs typescript react-native react-navigation

【解决方案1】：

您好，您将获得在导航参数中发送的数据 props.route.params

【讨论】：

能否请您复制并更改我的代码？我真的不知道如何/在哪里使用props.route.params。请注意，我使用的是打字稿
你只需要使用这个``` let fName = props.route.params```到你正在导航的屏幕。在你的情况下，屏幕是UserDetailsScreen