Reactjs navigation.push(';SearchPage';{search#params:item.school#type});naviagtion.push不改变屏幕
当我使用Reactjs navigation.push(';SearchPage';{search#params:item.school#type});naviagtion.push不改变屏幕,reactjs,react-native,Reactjs,React Native,当我使用navigation.navigate('SearchPage',{search\u params:item.school\u type})时然后,当我单击卡片搜索参数时,仅通过一次,第二次搜索参数未通过。当我使用navigation.push('SearchPage',{search\u params:item.school\u type})时然后参数已通过,但屏幕未更改 这是组件代码 import React from 'react'; import {withNavigation}
navigation.navigate('SearchPage',{search\u params:item.school\u type})时代码>然后,当我单击卡片搜索参数时,仅通过一次,第二次搜索参数未通过。当我使用navigation.push('SearchPage',{search\u params:item.school\u 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);
从“React”导入React;
从'@react-navigation/compat'导入{withNavigation};
从“react native”导入{Image,StyleSheet,TouchableWithoutFeedback,Alert};
从“galio框架”导入{块、文本、主题};
班级分类卡扩展了React.Component{
render(){
const{navigation,item,horizontal,full,style,ctaColor,imageStyle}=this.props;
常量imageStyles=[
full?styles.fullImage:styles.horizontalImage,
图像样式
];
const cardContainer=[style.card,style.shadow,style];
常量imgContainer=[styles.imageContainer,
水平?样式。水平样式:样式。垂直样式,
阴影
];
返回(
{
push('SearchPage',{search_参数:item.school_type});
}}>
{
警报。警报(“点击”);
/*this.props.navigation.navigate('SearchPage',{search\u params:item.school\u type})*/
}}>
{item.title}
);
}
}
const styles=StyleSheet.create({
卡片:{
背景颜色:theme.COLORS.WHITE,
MARGINTICAL:theme.SIZES.BASE,
边框宽度:0,
身高:114,
marginBottom:16
},
卡片标题:{
弹性:1,
flexWrap:“wrap”,
重量:“700”,
},
卡片名称:{
弹性:1,
flexWrap:“wrap”,
填充底部:6,
重量:“700”,
textAlign:“居中”,
尺寸:15
},
卡片说明:{
填充:theme.size.BASE/2
},
图像容器:{
边界半径:3,
立面图:1,
溢出:“隐藏”,
},
图片:{
//边界半径:3,
},
水平图像:{
身高:100,
宽度:“自动”,
},
水平样式:{
borderTopRightRadius:0,
borderBottomRightRadius:0,
},
垂直样式:{
borderBottomRightRadius:0,
borderBottomLeftRadius:0
},
完整图像:{
身高:150
},
影子:{
阴影颜色:theme.COLORS.BLACK,
阴影偏移:{宽度:0,高度:2},
阴影半径:4,
阴影不透明度:0.1,
标高:2,
},
});
使用导航导出默认值(学校类别卡片);
试试这个选项
import { StackActions } from '@react-navigation/native';
const pushAction = StackActions.push('SearchPage', { search_params: item.school_type});
navigation.dispatch(pushAction);
使用抽屉导航时,页面存储在缓存中
要删除缓存,请使用以下命令
unmountOnBlur={true}
options={{unmountOnBlur: true}}
例如:
<Drawer.Screen name="SchoolDetails" component={DetailPageStack} unmountOnBlur={true}
options={{unmountOnBlur: true}}/>
这就解决了我的参数缓存问题。无法获取错误。任何导航器都没有处理带有有效负载{“name”:“SearchPage”,“params”:{“search_params”:2}}的操作“PUSH”。函数SearchStack(props){return(()}}}initialParams={{search_params:props.route.params.search_params}/>);}这是我的searchstack功能如果屏幕在导航中没有更改,您如何看到参数被传递。推送?在搜索页面中,我使用console.log打印params@GauravRoyso,它在那里导航,但页面没有显示?当我使用naviagtion.push时,参数被传递,并且它在控制台中打印,但屏幕没有更改,但当我使用navigation.navigate然后仅在第一次传递参数时进行导航,而不是在第二次传递参数时进行导航