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

当你使用抽屉导航时，页面存储在缓存中 要删除缓存，请使用此

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

例：

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

这解决了我的参数缓存问题。

Answer 2

试试这个选项

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

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

navigation.dispatch(pushAction);