我有过滤器屏幕和搜索屏幕。当用户从搜索屏幕导航时,我正在将搜索词从搜索屏幕传递到主屏幕。同样,我正在为过滤器屏幕做同样的事情(将filterOptions从过滤器屏幕传递到主屏幕)。
现在,当我从过滤器屏幕转到主屏幕时,我想将searchTerm设置为null,同样,如果我从搜索屏幕到主屏幕,我想将filterOptions设置为null怎么办?
在下面的代码中,行A和行B没有将filterOptions
和searchTerm
设置为null,这就是为什么过滤器和搜索不起作用的原因,因为filterOptions不为null时我希望searchTerm为null仅过滤器应在该实例下工作。同样,如果filterOptions为null,那么searchTerm不能为null,这意味着只有搜索才能在该实例上进行。
代码:
filterProjectResults = (projects) => {
let filterOptions = this.props.navigation.getParam('filterOptions', null);
let searchTerm = this.props.navigation.getParam('searchTerm', null);
console.log('Initial filterOptions ', filterOptions); --> initially null
console.log('intital searchTerm ', searchTerm); --> initially null
if(filterOptions !== null){
console.log('Inisde filter screen ', filterOptions)
let display_filtered_projects = projects.filter((item) => item.floorplans.some(val => filterOptions.includes(val.bhk)));
searchTerm = null; <--- Line A
return display_filtered_projects;
} else if (searchTerm !== null) {
console.log('Inside Search screen ', searchTerm);
let search_filter_projects = projects.filter(
(project) => {
return project.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
}
);
filterOptions = null; <<--- Line B
return search_filter_projects;
}
}
search.js:
<TouchableOpacity onPress={() => this.props.navigation.navigate('Projects', {searchTerm : this.state.text})}>
<Image source={require('../../assets/images/search.png')} style={{width: 24, height: 24, resizeMode: 'contain'}}/>
</TouchableOpacity>
filter.js:
<TouchableOpacity onPress={() => this.props.navigation.navigate('Projects', {filterOptions: this.state.filterOptions})}>
<View style={styles.filterButton}>
<Text style={styles.filterButtonText}>Apply Filters</Text>
</View>
</TouchableOpacity>
我正在Flatlist中传递此过滤或搜索的数据以显示结果。如果尝试使用状态来实现它,则会收到错误-> https://imgur.com/a/P4vyRsu代码:https://gist.github.com/aditodkar/1df0175e2b13727daaae0373040f8dcf
答案 0 :(得分:1)
致电时
name
您还可以像这样添加shell
become
?
然后您可以拨打另一个电话
this.props.navigation.navigate('Projects', {searchTerm : this.state.text})}>
您还可以随时致电filterOptions: null
并将其设置为null。
希望有帮助!
答案 1 :(得分:1)
这个在github issue#6674上的问题是相同的问题。
这是默认行为。
答案 2 :(得分:0)
您可以在屏幕离开事件时使用导航生命周期 on blur
更新参数,并且必须指定您的参数,因为参数会进行浅更新而不是覆盖值
search.js:
import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback} from 'react';
useFocusEffect(
useCallback(() => {
return () => {
navigation.setParams({ searchTerm: null });
};
}, []),
);