使用react native paper和react nativenavigation v5将道具从屏幕堆栈下导航器传递

Question

这是我的环境：

"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",

我使用本指南成功地实现了集成。以下是我当前对堆栈导航器的实现。

<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>
);
}

对于注销函数，可以使用auth上下文提供程序来传递它。我如何在我的HomeScreen和AppBar之间传递handleChangeMonth和handleSearch函数的props/函数，因为它需要HomeScreen来重写数据？

Answer 1

您可以这样使用，<堆栈屏幕initialParams＝｛｛userAuth:true｝｝/>