英文:
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;
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论