Reactjs 当导航到并更改导航参数时，屏幕停止交互

我正在使用react navigation v4.0中的抽屉导航器。当我导航到某个页面时，应用程序将停止响应，并且没有按钮工作。这是在我在主组件中使用navigation.setParams之后发生的

我没有收到任何错误，应用程序只是停止检测点击。我已经查看了react导航文档，并且正确地使用了setParams/getParam

我的代码： 页面也被导航

import React, { useState, useEffect, useCallback } from "react";
import { View, Text, StyleSheet, Switch, Platform } from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { HeaderButton } from "../components/HeaderButton";
import colors from "../constants/Colors";
const Option = ({ value, onValueChange, title }) => (
  <View style={styles.filterContainer}>
    <Text>{title}</Text>
    <Switch
      trackColor={{ true: colors.primary }}
      thumbColor={Platform.OS === "android" ? colors.primary : "#fff"}
      value={value}
      onValueChange={onValueChange}
    />
  </View>
);
function FiltersScreen({ navigation }) {
  const [isGlutenFree, setIsGlutenFree] = useState(false);
  const [isLactoseFree, setIsLactoseFree] = useState(false);
  const [isVegan, setIsVegan] = useState(false);
  const [isVegetarian, setIsVegetarian] = useState(false);
  const saveFilters = useCallback(() => {
    const appliedFilters = {
      glutenFree: isGlutenFree,
      lactoseFree: isLactoseFree,
      vegan: isVegan,
      vegetarian: isVegetarian,
    };
    console.log("saveFilters -> appliedFilters", appliedFilters);
  });

  useEffect(() => {
    navigation.setParams({ save: saveFilters });
  }, [saveFilters, navigation]);

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Filters / Restrictions</Text>
      <Option
        title="Gluten-free"
        onValueChange={setIsGlutenFree}
        value={isGlutenFree}
      />
      <Option
        title="Lactose-free"
        onValueChange={setIsLactoseFree}
        value={isLactoseFree}
      />
      <Option title="Vegan" onValueChange={setIsVegan} value={isVegan} />
      <Option
        title="Vegetarian"
        onValueChange={setIsVegetarian}
        value={isVegetarian}
      />
    </View>
  );
}
FiltersScreen.navigationOptions = ({ navigation }) => ({
  headerTitle: "Add Meal Filters",
  headerLeft: () => (
    <HeaderButtons HeaderButtonComponent={HeaderButton}>
      <Item
        title="Menu"
        iconName="ios-menu"
        onPress={() => navigation.toggleDrawer()}
      />
    </HeaderButtons>
  ),
  headerRight: () => (
    <HeaderButtons HeaderButtonComponent={HeaderButton}>
      <Item
        title="Save"
        iconName="ios-save"
        onPress={() => navigation.getParam("save")()}
      />
    </HeaderButtons>
  ),
});
const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: "center" },
  title: {
    fontFamily: "roboto-bold",
    fontSize: 22,
    margin: 20,
    textAlign: "center",
  },
  filterContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "80%",
    marginVertical: 15,
  },
});
export default FiltersScreen;

import React，{useState，useffect，useCallback}来自“React”；
从“react native”导入{视图、文本、样式表、开关、平台}；
从“反应导航标题按钮”导入{HeaderButtons，Item}；
从“./components/HeaderButton”导入{HeaderButton}”；
从“./常量/颜色”导入颜色；
常量选项=（{value，onValueChange，title}）=>(
{title}
);
函数筛选器屏幕（{navigation}）{
const[isglumnfree，setisglumnfree]=useState（false）；
const[isLactoseFree，setIsLactoseFree]=useState（false）；
const[isVegan，setIsVegan]=useState（false）；
const[is素食主义者，setis素食主义者]=useState（false）；
const saveFilters=useCallback（（）=>{
常量appliedFilters={
无麸质：无麸质，
不含乳糖：不含乳糖，
素食主义者：我是素食主义者，
素食者：我是素食者，
};
log（“saveFilters->appliedFilters”，appliedFilters）；
});
useffect（（）=>{
setParams（{save:saveFilters}）；
}，[saveFilters，navigation]）；
返回(
过滤器/限制
);
}
FiltersScreen.navigationOptions=（{navigation}）=>({
标题：“添加膳食过滤器”，
标题左侧：（）=>(
navigation.toggleDrawer（）}
/>
),
头灯：（）=>(
navigation.getParam（“save”）（）}
/>
),
});
const styles=StyleSheet.create({
屏幕：{flex:1，alignItems:“center”}，
标题：{
fontFamily：“机器人大胆”，
尺寸：22，
差额：20，
textAlign：“居中”，
},
过滤器容器：{
flexDirection:“行”，
辩护内容：“间隔空间”，
对齐项目：“中心”，
宽度：“80%”，
澳门时间:15,，
},
});
导出默认过滤器屏幕；

我的导航器设置

import { createStackNavigator } from "react-navigation-stack";
import React from "react";
import { createAppContainer } from "react-navigation";
import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealsScreen from "../screens/CategoryMealsScreen";
import FavouritesScreen from "../screens/FavouritesScreen";
import MealDetailScreen from "../screens/MealDetailScreen";
import FiltersScreen from "../screens/FiltersScreen";
import topNavStyles from "../constants/TopNavStyles";
import { createBottomTabNavigator } from "react-navigation-tabs";
import colors from "../constants/Colors";
import { Ionicons } from "@expo/vector-icons";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { createDrawerNavigator } from "react-navigation-drawer";

const defaultNavConfig = {
  defaultNavigationOptions: {
    ...topNavStyles,
    headerTitleStyle: {
      fontFamily: "roboto-bold",
    },
    headerBackTitleStyle: {
      fontFamily: "roboto",
    },
    headerTitle: "",
  },
};

const MealsNavigator = createStackNavigator(
  {
    Categories: CategoriesScreen,
    CategoryMeals: CategoryMealsScreen,
    MealDetail: MealDetailScreen,
  },
  defaultNavConfig
);

const FavStack = createStackNavigator(
  {
    Favorites: FavouritesScreen,
    MealDetail: MealDetailScreen,
  },
  defaultNavConfig
);

const FavNavigator = createMaterialBottomTabNavigator(
  {
    Meals: {
      screen: MealsNavigator,
      navigationOptions: {
        tabBarIcon: (tabInfo) => {
          return (
            <Ionicons
              name="ios-restaurant"
              size={25}
              color={tabInfo.tintColor}
            />
          );
        },
        tabBarColor: colors.primary,
      },
    },
    Favourites: {
      screen: FavStack,
      navigationOptions: {
        tabBarIcon: (tabInfo) => {
          return (
            <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />
          );
        },
        tabBarColor: colors.accent,
      },
    },
  },
  {
    activeColor: "#fff",
    shifting: true,
    navigationOptions: {
      drawerLabel: "Meals",
    },
  }
);
const Filters = createStackNavigator(
  {
    Filters: FiltersScreen,
  },
  {
    navigationOptions: {
      drawerLabel: "Add Food Filters",
    },
    ...defaultNavConfig,
  }
);
const FilterNavigator = createDrawerNavigator(
  {
    FavMeals: FavNavigator,
    Filters,
  },
  {
    drawerType: "slide",
    contentOptions: {
      activeTintColor: colors.accent,
      labelStyle: {
        fontFamily: "roboto-bold",
      },
    },
  }
);

export default createAppContainer(FilterNavigator);

从“反应导航堆栈”导入{createStackNavigator}；
从“React”导入React；
从“react navigation”导入{createAppContainer}；
从“./screens/CategoriesScreen”导入分类屏幕；
从“./screens/CategoryMealsScreen”导入CategoryMealsScreen；
从“./screens/favoritesscreen”导入收藏夹屏幕；
从“./screens/MealDetailScreen”导入MealDetailScreen；
从“./screens/FiltersScreen”导入过滤器屏幕；
从“./常量/topNavStyles”导入topNavStyles；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
从“./常量/颜色”导入颜色；
从“@expo/vector icons”导入{Ionicons}”；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“react navigation drawer”导入{createDrawerNavigator}；
常量defaultNavConfig={
默认导航选项：{
…顶置导航样式，
头饰样式：{
fontFamily：“机器人大胆”，
},
headerBackTitleStyle：{
fontFamily：“机器人”，
},
头饰：“，
},
};
const MealsNavigator=createStackNavigator(
{
类别：分类屏幕，
CategoryMeals：CategoryMeals屏幕，
Mealdeail:Mealdeail屏幕，
},
defaultNavConfig
);
const FavStack=createStackNavigator(
{
收藏夹：收藏夹屏幕，
Mealdeail:Mealdeail屏幕，
},
defaultNavConfig
);
const FavNavigator=createMaterialBottomTabNavigator(
{
膳食：{
屏幕：MealsNavigator，
导航选项：{
tabBarIcon：（tabInfo）=>{
返回(
);
},
tabBarColor:colors.primary，
},
},
最爱：{
屏幕：FavStack，
导航选项：{
tabBarIcon：（tabInfo）=>{
返回(
);
},
tabBarColor:colors.accent，
},
},
},
{
activeColor:#fff“，
是的，
导航选项：{
抽屉标签：“膳食”，
},
}
);
const Filters=createStackNavigator(
{
过滤器：过滤器屏幕，
},
{
导航选项：{
抽屉标签：“添加食品过滤器”，
},
…defaultNavConfig，
}
);
const FilterNavigator=createDrawerNavigator(
{
FavMeals:FavNavigator，
过滤器，
},
{
抽屉类型：“幻灯片”，
内容选项：{
activeTintColor:colors.accent，
标签样式：{
fontFamily：“机器人大胆”，
},
},
}
);
导出默认createAppContainer（FilterNavigator）；