英文:
Passing props to react navigation drawer custom header
问题
你想要如何将参数传递给以下自定义的 React 导航抽屉标题 'NavHeader'？我想在 NavHeader 内部包含一个使用以下代码的图标：navigation.dispatch(DrawerActions.openDrawer())
function NavHeader(props) {
return <View>...</View>;
}
<Stack.Navigator
initialRouteName="Page1"
screenOptions={{
headerShown: true,
headerTransparent: false,
header: NavHeader
}}
>
<Stack.Screen name="Page1" component={Page1} />
<Stack.Screen name="Page2" component={Page2} />
</Stack.Navigator>
英文:
How can I pass arguments to the following custom react navigation drawer header 'NavHeader'? I want to include an icon inside the NavHeader that uses the following: navigation.dispatch(DrawerActions.openDrawer())
function NavHeader(props) {
return <View>...</View>;
}
<Stack.Navigator
initialRouteName="Page1"
screenOptions={{
headerShown: true,
headerTransparent:false,
header: NavHeader
}}
>
<Stack.Screen name="Page1" component={Page1} />
<Stack.Screen name="Page2" component={Page2} />
</Stack.Navigator>
答案1
得分: 1
以下是翻译好的部分：
"navigation" 对象位于传递给 NavHeader 的 props 中。JavaScript 语法隐藏了传递给头部的参数；当传递一个函数时，写成：
header: myFunction
与写成：
header: (args) => myFunction(args)
是一样的。
换句话说，你的 screenOptions 可以像这样重新编写：
screenOptions={{
// ...
header: ({ navigation }) => <NavHeader navigation={navigation} />,
这就是为什么你可以在 NavHeader 组件内部使用 navigation 对象。
在你当前的 NavHeader 代码中，你可以通过 props.navigation 来调用它。
传递给 "header" 的完整 props：
export type StackHeaderProps = {
/**
* 屏幕的布局。
*/
layout: Layout;
/**
* 返回按钮的选项。
*/
back?: {
/**
* 上一个屏幕的标题。
*/
title: string;
};
/**
* 表示动画进度的动画节点。
*/
progress: SceneProgress;
/**
* 当前屏幕的选项。
*/
options: StackNavigationOptions;
/**
* 当前屏幕的路由对象。
*/
route: Route<string>;
/**
* 头部的导航属性。
*/
navigation: StackNavigationProp<ParamListBase>;
/**
* 头部各元素的插值样式。
*/
styleInterpolator: StackHeaderStyleInterpolator;
};
英文:
The navigation object is in the props that get passed to NavHeader. Javascript syntax is hiding the arguments that get passed to your header; when passing a function, writing
header: myFunction
is the same as writing
header: (args) => myFunction(args).
In other words, your screenOptions could be rewritten like this:
screenOptions={{
// ...
header: ({ navigation }) => <NavHeader navigation={navigation} />,
This is why you can use the navigation object inside the NavHeader component.
In your current NavHeader code, you can call it with props.navigation.
Full props that get passed to the header:
export type StackHeaderProps = {
/**
* Layout of the screen.
*/
layout: Layout;
/**
* Options for the back button.
*/
back?: {
/**
* Title of the previous screen.
*/
title: string;
};
/**
* Animated nodes representing the progress of the animation.
*/
progress: SceneProgress;
/**
* Options for the current screen.
*/
options: StackNavigationOptions;
/**
* Route object for the current screen.
*/
route: Route<string>;
/**
* Navigation prop for the header.
*/
navigation: StackNavigationProp<ParamListBase>;
/**
* Interpolated styles for various elements in the header.
*/
styleInterpolator: StackHeaderStyleInterpolator;
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论