javascript - 将参数从屏幕传递到 Header 组件 react 导航

Question

我的问题是我无法将函数作为参数传递给 react-navigation v5 中的 header 组件。

从下面 filtersscreen.js 中的给定代码，我想将 savefilters 传递给 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 .

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

导航.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"
        }
    }
}

Answer 1

在 React-navigation 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

快乐编码;-)