将参数从屏幕传递到标题组件react导航

Question

我的问题是我不能将函数作为参数传递给react导航v5中的header组件。

从下面给出的filtersscreen.js代码中，我希望将savefilter传递给navigation.js中的headerRight。

我可以在log-1中查看保存参数。但是为什么我不能得到log-2中的保存参数，它是FilterNavigator。

我在使用setParams()时收到警告-“在导航状态中发现了不可序列化的值，这可能会破坏持久化和恢复状态等使用。如果您在参数中传递了不可序列化的值，如函数、类实例等，则可能会发生这种情况。如果您需要在选项中使用带有回调的组件，则可以使用'navigation.setOptions‘。有关更多详细信息，请参阅https://reactnavigation.org/docs/troubleshooting.html#i-get-the-warning-we-found-non-serializable-values-in-the-navigation-state。”

当我使用navigation.setOptions({ save: savefilters })时，我无法在route.params.save中找到保存

我刚接触react-native，我请求您帮助我解决这个问题。

我读了React Navigation v5的文档。

我在下面记录了输出。谢谢。

navigation.js

const FiltersNavigator = props => {
  return (
    <screen.Navigator initialRouteName="Filters">
      <screen.Screen
        options={{
          title: 'Filters',
          headerRight: () => (
            <View>
              <TouchableNativeFeedback>
                <MaterialCommunityIcons
                  name="content-save"
                  color="white"
                  size={28}
                  style={{padding: 15}}
                  onPress={() => console.log(props)} //log-2 attached below
                />
              </TouchableNativeFeedback>
            </View>
          ),
        }}
        name="Filters Meals"
        component={FiltersScreen}
      />
    </screen.Navigator>
  );
};

FiltersScreen.js

const FilterSwitch = props => {
  return (
    <View style={styles.filterContainer}>
      <Text>{props.label}</Text>
      <Switch
        trackColor={{true: Colors.primaryColor}}
        thumbColor={Colors.primaryColor}
        value={props.state}
        onValueChange={props.onChange}
      />
    </View>
  );
};

const FiltersScreen = props => {
  const {navigation} = props;
  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,
    };

  }, [isGlutenFree, isLactoseFree, isVegan, isVegetarian]);

  useEffect(() => {
    navigation.setParams({
      save: saveFilters,
    });
    console.log('useEffect : ', props); //log-1 attached below
  }, [saveFilters]);

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Available Filters / Restrictions</Text>
      <FilterSwitch
        label="Gluten-Free"
        state={isGlutenFree}
        onChange={newValue => setIsGlutenFree(newValue)}
      />
      <FilterSwitch
        label="Lactose-Free"
        state={isLactoseFree}
        onChange={newValue => setIsLactoseFree(newValue)}
      />
      <FilterSwitch
        label="Vegan"
        state={isVegan}
        onChange={newValue => setIsVegan(newValue)}
      />
      <FilterSwitch
        label="Vegetarian"
        state={isVegetarian}
        onChange={newValue => setIsVegetarian(newValue)}
      />
    </View>
  );
};

日志-1

{
    "navigation": {
        "addListener": [Function addListener
        ],
        "canGoBack": [Function canGoBack
        ],
        "closeDrawer": [Function anonymous
        ],
        "dangerouslyGetParent": [Function dangerouslyGetParent
        ],
        "dangerouslyGetState": [Function anonymous
        ],
        "dispatch": [Function dispatch
        ],
        "goBack": [Function anonymous
        ],
        "isFocused": [Function isFocused
        ],
        "jumpTo": [Function anonymous
        ],
        "navigate": [Function anonymous
        ],
        "openDrawer": [Function anonymous
        ],
        "pop": [Function anonymous
        ],
        "popToTop": [Function anonymous
        ],
        "push": [Function anonymous
        ],
        "removeListener": [Function removeListener
        ],
        "replace": [Function anonymous
        ],
        "reset": [Function anonymous
        ],
        "setOptions": [Function setOptions
        ],
        "setParams": [Function anonymous
        ],
        "toggleDrawer": [Function anonymous
        ]
    },
    "route": {
        "key": "Filters Meals-7XbV4LEyLo",
        "name": "Filters Meals",
        "params": {
            "save": [Function anonymous
            ]
        }
    }
}

log-2

{
    "navigation": {
        "addListener": [Function addListener
        ],
        "canGoBack": [Function canGoBack
        ],
        "closeDrawer": [Function anonymous
        ],
        "dangerouslyGetParent": [Function dangerouslyGetParent
        ],
        "dangerouslyGetState": [Function anonymous
        ],
        "dispatch": [Function dispatch
        ],
        "goBack": [Function anonymous
        ],
        "isFocused": [Function isFocused
        ],
        "jumpTo": [Function anonymous
        ],
        "navigate": [Function anonymous
        ],
        "openDrawer": [Function anonymous
        ],
        "removeListener": [Function removeListener
        ],
        "reset": [Function anonymous
        ],
        "setOptions": [Function setOptions
        ],
        "setParams": [Function anonymous
        ],
        "toggleDrawer": [Function anonymous
        ]
    },
    "route": {
        "key": "Filters-6CuzlMQv2w",
        "name": "Filters",
        "params": undefined,
        "state": {
            "index": 0,
            "key": "stack-7UXVGRjyv-",
            "routeNames": [Array
            ],
            "routes": [Array
            ],
            "stale": false,
            "type": "stack"
        }
    }
}

Answer 1

onPress={() => console.log(props)}

替换这个

onPress={route.params?.save}

React导航4x，不再有getParam

navigation.getParam('someParam', 'defaultValue');

等同于：

route.params?.someParam ?? 'defaultValue';

Documentation react navigation official

Answer 2

在React导航v5中，您必须像这样设置和获取参数

//您的navigation.js应该是

    const FiltersNavigator = props => {
  return (
    <screen.Navigator initialRouteName="Filters">
      <screen.Screen
        name="Filters Meals"
        component={FiltersScreen}
        options={({route, navigation}) => ({
          title: 'Filters',
          headerRight: () => (
            <View>
              <TouchableNativeFeedback>
                <MaterialCommunityIcons
                  name="content-save"
                  color="white"
                  size={28}
                  style={{padding: 15}}
                  onPress={() => route.params.save()} 
                />
              </TouchableNativeFeedback>
            </View>
          ),

         })}

      />
    </screen.Navigator>
  );
};

//您的FiltersScreen组件应该是

const FiltersScreen = props => {
  const {navigation} = props;
  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,
    };

  }, [isGlutenFree, isLactoseFree, isVegan, isVegetarian]);

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

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Available Filters / Restrictions</Text>
      <FilterSwitch
        label="Gluten-Free"
        state={isGlutenFree}
        onChange={newValue => setIsGlutenFree(newValue)}
      />
      <FilterSwitch
        label="Lactose-Free"
        state={isLactoseFree}
        onChange={newValue => setIsLactoseFree(newValue)}
      />
      <FilterSwitch
        label="Vegan"
        state={isVegan}
        onChange={newValue => setIsVegan(newValue)}
      />
      <FilterSwitch
        label="Vegetarian"
        state={isVegetarian}
        onChange={newValue => setIsVegetarian(newValue)}
      />
    </View>
  );
};

如果你仍然有问题，你可以参考这个repo GitHub Repo

快乐编码;-)

Answer 3

在FilterNavigator的第二行中，将

const { save } = props.route.params;

然后再往下走

onPress = {save}