传递属性给React Navigation抽屉式导航自定义标题栏

huangapple go评论71阅读模式
英文:

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 &lt;View&gt;...&lt;/View&gt;;
}

&lt;Stack.Navigator
  initialRouteName=&quot;Page1&quot;
  screenOptions={{
    headerShown: true,
    headerTransparent:false,
    header: NavHeader
  }}
&gt;
     &lt;Stack.Screen name=&quot;Page1&quot; component={Page1} /&gt;
     &lt;Stack.Screen name=&quot;Page2&quot; component={Page2} /&gt;
&lt;/Stack.Navigator&gt;

答案1

得分: 1

以下是翻译好的部分:

"navigation" 对象位于传递给 NavHeader 的 props 中。JavaScript 语法隐藏了传递给头部的参数;当传递一个函数时,写成:

header: myFunction

与写成:

header: (args) =&gt; myFunction(args)

是一样的。

换句话说,你的 screenOptions 可以像这样重新编写:

  screenOptions={{
    // ...
    header: ({ navigation }) =&gt; &lt;NavHeader navigation={navigation} /&gt;,

这就是为什么你可以在 NavHeader 组件内部使用 navigation 对象。

在你当前的 NavHeader 代码中,你可以通过 props.navigation 来调用它。

传递给 "header" 的完整 props:

export type StackHeaderProps = {
  /**
   * 屏幕的布局。
   */
  layout: Layout;
  /**
   * 返回按钮的选项。
   */
  back?: {
    /**
     * 上一个屏幕的标题。
     */
    title: string;
  };
  /**
   * 表示动画进度的动画节点。
   */
  progress: SceneProgress;
  /**
   * 当前屏幕的选项。
   */
  options: StackNavigationOptions;
  /**
   * 当前屏幕的路由对象。
   */
  route: Route&lt;string&gt;;
  /**
   * 头部的导航属性。
   */
  navigation: StackNavigationProp&lt;ParamListBase&gt;;
  /**
   * 头部各元素的插值样式。
   */
  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) =&gt; myFunction(args).

In other words, your screenOptions could be rewritten like this:

  screenOptions={{
    // ...
    header: ({ navigation }) =&gt; &lt;NavHeader navigation={navigation} /&gt;,

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&lt;string&gt;;
  /**
   * Navigation prop for the header.
   */
  navigation: StackNavigationProp&lt;ParamListBase&gt;;
  /**
   * Interpolated styles for various elements in the header.
   */
  styleInterpolator: StackHeaderStyleInterpolator;
};

huangapple
  • 本文由 发表于 2023年6月29日 21:11:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76581403.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定