如何在React Navigation 5中将父函数传递给子屏幕?

马图萨莱姆

最近,我开始使用React Native0.61.5和React导航5.x现在,我需要将父函数传递给子屏幕。例如,我想通过按嵌套在StackNavigator中的TabNavigator选项卡中的按钮来更改导航栏图标。以前(3.x版导航)getActiveChildNavigationOptions用于满足我的需求,但现在已将其删除。因此,实现此目标的唯一方法是将自定义函数传递给子组件。

在示例代码中,我想从更改XXXXXXXXYYYYYYYYY

const TabA = ({ route }) => (
  <View>
    <Text>Tab A</Text>
      <Button 
        title="Change header"
        onPress={() => route.params.setHeaderRightName("YYYYYYYYY")}/>
  </View>
)

const TabB = () => <><Text>Tab B</Text></>

const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation }) => {
  const [headerRightName, setHeaderRightName] = useState("XXXXXXXX");

  useLayoutEffect(() => navigation.setOptions({
    headerRight: () => <MyNavIcon name={headerRightName}/>
  }), [headerRightName]);

  return (
    <Tabs.Navigator>
      <Tabs.Screen name="tab-a" component={TabA} initialParams={{ setHeaderRightName }} />
      <Tabs.Screen name="tab-b" component={TabB} />
    </Tabs.Navigator>
  );
}

const Stack = createStackNavigator();
export default App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="tabs" component={TabsNavigator} />
      <Stack.Screen name="another-screen" component={AnotherScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

一切正常,但我收到此警告:

在此处输入图片说明

全文:

Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.

因此,如果警告说我无法使用路由参数传递功能,该如何将功能从父级传递给子级?

马图萨莱姆

警告中的链接指向的文档页面显示:

如果您不使用状态持久化或不使用接受参数形式的功能的深层链接到屏幕,则可以忽略该警告。要忽略它,可以使用YellowBox.ignoreWarnings。

因此,就我而言,我可以忽略此警告并以安全的方式传递认为路由参数有用的函数。

YellowBox.ignoreWarnings([
  'Non-serializable values were found in the navigation state',
]);

或对本机0.63和更高版本进行反应:

LogBox.ignoreLogs([
  'Non-serializable values were found in the navigation state',
]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在React Navigation 5的Tab Navigation中传递空屏幕

来自分类Dev

React Navigation 5将参数传递给嵌套导航器中的屏幕

来自分类Dev

如何在React Navigation v5中重置状态?

来自分类Dev

将参数传递给标签导航器React Navigation 5

来自分类Dev

登录后如何在 React Navigation 中重定向

来自分类Dev

react-navigation 如何在 createAppContainer 中嵌套 TapNavigator

来自分类Dev

如何在react-navigation v5中从单个屏幕隐藏堆栈导航标题

来自分类Dev

如何在React-Native中通过React-Navigation多次传递参数?

来自分类Dev

如何在Tab Navigator中设置Stack Navigator的始终第一个屏幕React React Navigation 5

来自分类Dev

React Navigation:如何在按下 TouchableOpacity 时传递道具并导航到其他屏幕

来自分类Dev

如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

来自分类Dev

如何在MVC4中将父视图的特定字段的值传递给子视图?

来自分类Dev

react-navigation:如何在多個屏幕中包裝 navigationOptions

来自分类Dev

在React Navigation v5动态组件配置中将道具传递给组件

来自分类Dev

在 React Navigation 中重用屏幕

来自分类Dev

在React Navigation 5中传递参数

来自分类Dev

如何在react-navigation v5中同时呈现Tab导航和Drawer导航

来自分类Dev

我如何在React Navigation 5.x中创建透明背景?

来自分类Dev

如何在react-navigation 5x中隐藏Drawer项目?

来自分类Dev

如何在React-Navigation 5中定义不同的导航流组

来自分类Dev

如何在React Navigation 5中更改选项卡图标之间的距离?

来自分类Dev

如何在React Native Navigation V5的标签栏中隐藏标签?

来自分类Dev

如何在React中将onClick传递给父对象

来自分类Dev

如何在将父级的fetch调用中的数据传递给它之前停止React子级组件的加载

来自分类Dev

React Stack Navigation,如何在没有路由的情况下传递状态

来自分类Dev

如何在 react-Native 中使用 Tab Navigation 传递数据?(反应导航)?

来自分类Dev

React Navigation 5-如何从headerRight导航?

来自分类Dev

如何使用React Navigation 5捕获参数?

来自分类Dev

将动作创建者传递给 react-navigation

Related 相关文章

  1. 1

    如何在React Navigation 5的Tab Navigation中传递空屏幕

  2. 2

    React Navigation 5将参数传递给嵌套导航器中的屏幕

  3. 3

    如何在React Navigation v5中重置状态?

  4. 4

    将参数传递给标签导航器React Navigation 5

  5. 5

    登录后如何在 React Navigation 中重定向

  6. 6

    react-navigation 如何在 createAppContainer 中嵌套 TapNavigator

  7. 7

    如何在react-navigation v5中从单个屏幕隐藏堆栈导航标题

  8. 8

    如何在React-Native中通过React-Navigation多次传递参数?

  9. 9

    如何在Tab Navigator中设置Stack Navigator的始终第一个屏幕React React Navigation 5

  10. 10

    React Navigation:如何在按下 TouchableOpacity 时传递道具并导航到其他屏幕

  11. 11

    如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

  12. 12

    如何在MVC4中将父视图的特定字段的值传递给子视图?

  13. 13

    react-navigation:如何在多個屏幕中包裝 navigationOptions

  14. 14

    在React Navigation v5动态组件配置中将道具传递给组件

  15. 15

    在 React Navigation 中重用屏幕

  16. 16

    在React Navigation 5中传递参数

  17. 17

    如何在react-navigation v5中同时呈现Tab导航和Drawer导航

  18. 18

    我如何在React Navigation 5.x中创建透明背景?

  19. 19

    如何在react-navigation 5x中隐藏Drawer项目?

  20. 20

    如何在React-Navigation 5中定义不同的导航流组

  21. 21

    如何在React Navigation 5中更改选项卡图标之间的距离?

  22. 22

    如何在React Native Navigation V5的标签栏中隐藏标签?

  23. 23

    如何在React中将onClick传递给父对象

  24. 24

    如何在将父级的fetch调用中的数据传递给它之前停止React子级组件的加载

  25. 25

    React Stack Navigation,如何在没有路由的情况下传递状态

  26. 26

    如何在 react-Native 中使用 Tab Navigation 传递数据?(反应导航)?

  27. 27

    React Navigation 5-如何从headerRight导航?

  28. 28

    如何使用React Navigation 5捕获参数?

  29. 29

    将动作创建者传递给 react-navigation

热门标签

归档