Моя проблема в том, что я не могу передать функцию в качестве параметра компоненту заголовка в response-navigation v5.
Из приведенного ниже кода на экране фильтра. js, я хочу передать savefilters в headerRight, который находится в навигации. js.
Я могу просмотреть параметр сохранения в log-1. Но почему я не могу получить параметр сохранения в log-2, который является FilterNavigator.
Я получаю предупреждение, когда использую setParams () - «В состоянии навигации обнаружены несериализуемые значения, который может нарушить использование, такое как сохранение и восстановление состояния. Это может произойти, если вы передали несериализуемые значения, такие как функция, экземпляры классов и т. д. c. в параметрах. Если вам нужно использовать компоненты с обратными вызовами в ваших параметрах, вы можете использовать вместо 'navigation.setOptions'. Подробнее см. https://reactnavigation.org/docs/troubleshooting.html#i -get-the-warning-we-found-non-serialisable-values-in-the-navigation-state . "
Когда я использую navigation.setOptions ({save: savefilters}), я не могу найти сохранение в route.params.save
Я новичок в реагировать на нативный, я прошу вас помочь мне в этом проблема.
Я прочитал документы React Navigation v5 .
Я зарегистрировал вывод ниже. Спасибо.
навигация. 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>
);
};
log-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"
}
}
}