navigation.push('SearchPage'，{search_params: item.school_type})；naviagtion.push不更改屏幕

Question

当我使用navigation.navigate('SearchPage', {search_params: item.school_type});时，当我点击卡片时，search_params只传递了一次，第二次搜索参数没有传递。当我使用navigation.push('SearchPage', {search_params: item.school_type});时，参数通过了，但屏幕没有改变

以下是组件代码

import React from 'react';
import {withNavigation} from '@react-navigation/compat';
import {Image, StyleSheet, TouchableWithoutFeedback,Alert} from 'react-native';
import {Block, Text, theme} from 'galio-framework';

class SchoolCategoryCards extends React.Component {



render() {
    const {navigation, item, horizontal, full, style, ctaColor, imageStyle} = this.props;

    const imageStyles = [
      full ? styles.fullImage : styles.horizontalImage,
      imageStyle
    ];
const cardContainer = [styles.card, styles.shadow, style];
const imgContainer = [styles.imageContainer,
  horizontal ? styles.horizontalStyles : styles.verticalStyles,
  styles.shadow
];

return (
  <Block row={horizontal} card flex style={cardContainer}>
    <TouchableWithoutFeedback  onPress={() => {
      navigation.push('SearchPage', {search_params: item.school_type});
    }}>
      <Block flex style={imgContainer}>
        <Image source={{uri: item.image}} style={imageStyles}/>
      </Block>
    </TouchableWithoutFeedback>

    <TouchableWithoutFeedback onPress={() => {
      Alert.alert("Clicked");
      /*this.props.navigation.navigate('SearchPage', {search_params: item.school_type});*/
    }}>
      <Block flex space="between" style={styles.cardDescription}>
        <Text size={14} style={styles.cardTitle}>{item.title}</Text>
      </Block>
    </TouchableWithoutFeedback>
  </Block>
);
  }
}
const styles = StyleSheet.create({

  card: {
    backgroundColor: theme.COLORS.WHITE,
    marginVertical: theme.SIZES.BASE,
    borderWidth: 0,
    minHeight: 114,
    marginBottom: 16
  },
  cardHeading: {
    flex: 1,
    flexWrap: 'wrap',
    fontWeight: "700",
  },
  cardTitle: {
    flex: 1,
    flexWrap: 'wrap',
    paddingBottom: 6,
    fontWeight: "700",
    textAlign: "center",
    fontSize: 15
  },
  cardDescription: {
    padding: theme.SIZES.BASE / 2
  },
  imageContainer: {
    borderRadius: 3,
    elevation: 1,
    overflow: 'hidden',
  },
  image: {
    // borderRadius: 3,
  },
  horizontalImage: {
    height: 100,
    width: 'auto',
  },
  horizontalStyles: {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
  },
  verticalStyles: {
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 0
  },
  fullImage: {
    height: 150
  },
  shadow: {
    shadowColor: theme.COLORS.BLACK,
    shadowOffset: {width: 0, height: 2},
    shadowRadius: 4,
    shadowOpacity: 0.1,
    elevation: 2,
  },
});

export default withNavigation(SchoolCategoryCards);

Answer 1

当您使用drawerNaviagtion，然后使用存储在缓存中的页面来删除缓存时，请使用以下代码

 unmountOnBlur={true}
                 options={{unmountOnBlur: true}}

示例：

<Drawer.Screen name="SchoolDetails" component={DetailPageStack} unmountOnBlur={true}
                     options={{unmountOnBlur: true}}/>

这解决了我的params缓存问题。

Answer 2

尝试此选项

import { StackActions } from '@react-navigation/native';


const pushAction = StackActions.push('SearchPage', { search_params: item.school_type});


navigation.dispatch(pushAction);