小编man*_*box的帖子

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

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

从filtersscreen.js中下面给定的代码中,我想将savefilters传递给navigation.js中的headerRight。

我可以在log-1中查看保存参数。但是为什么我无法在 log-2(即 FilterNavigator)中获取保存参数。

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

当我使用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>
  );
};
Run Code Online (Sandbox Code Playgroud)

FilterScreen.js

const FilterSwitch = props => …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native react-native-navigation react-navigation

2
推荐指数
1
解决办法
8266
查看次数