使用 react native paper 和 react native navigation v5 将道具从堆栈导航器下的屏幕传递到共享应用栏答案

【问题标题】：Passing the props from screen under stack navigator to the shared appbar using react native paper and react native navigation v5使用 react native paper 和 react native navigation v5 将道具从堆栈导航器下的屏幕传递到共享应用栏
【发布时间】：2021-04-24 07:52:24
【问题描述】：

这是我的环境：

"react": "17.0.1",
"react-native": "0.64.0"
"@react-navigation/native": "^5.9.4"
"@react-navigation/stack": "^5.14.4"
"react-navigation-stack": "^2.10.4",
"react-native-paper": "^4.7.2",

我已使用this guide 成功实现了集成。这是我当前对堆栈导航器的实现。

<AuthContext.Provider value={authContextValue}>
  <NavigationContainer>
     <Stack.Navigator
       screenOptions={{
         header: props => <Appbar {...props} />,
        }}>
      <Stack.Screen name="Verval" component={HomeScreen} />
      <Stack.Screen name="ClaimForm" component={ClaimFormScreen} />
     </Stack.Navigator>
  </NavigationContainer>
</AuthContext.Provider>

AppBar.js

import React, {useContext} from 'react';
import {Appbar} from 'react-native-paper';

import {AuthContext} from '../../utils/authContext';

import {months} from '../../utils/helpers';

export default function CustomNavigationBar({navigation, previous}) {
    const {logout} = useContext(AuthContext);

    const today = new Date();

    const _handleChangeMonth = () => console.log('Change month');
    const _handleSearch = () => console.log('Searching');
    const _handleLogout = () => logout();

    return (
      <Appbar.Header>
        {previous ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
        {!previous ? (
          <>
          <Appbar.Content
            title="My App"
            subtitle={months[today.getMonth() + 1] + ' ' + today.getFullYear()}
          />
          <Appbar.Action
            icon="calendar-month"
            color="white"
            onPress={_handleChangeMonth}
          />
          <Appbar.Action icon="magnify" color="white" onPress={_handleSearch} />
          <Appbar.Action icon="import" color="white" onPress={_handleLogout} />
          </>
       ) : (
          <Appbar.Content
             title="Claim Form Title"
             subtitle="Claim Form Subtitle"
          />
       )}
      </Appbar.Header>
     );
  }

对于注销功能，它可以使用身份验证上下文提供程序传递。我如何在 HomeScreen 和 AppBar 之间为 handleChangeMonth 和 handleSearch 函数传递道具/函数，因为 HomeScreen 需要它来重新获取数据？

【问题讨论】：

标签： reactjs react-native navigation react-native-paper

【解决方案1】：

你可以这样使用，

【讨论】：