Stack.Screen 中的 React Native 多个选项（参数标题 + headerRight 按钮）答案

【问题标题】：React Native multiple options in Stack.Screen (params title + headerRight button)Stack.Screen 中的 React Native 多个选项（参数标题 + headerRight 按钮）
【发布时间】：2021-01-01 17:11:54
【问题描述】：

我有一个堆栈。第一个屏幕是项目列表，当您单击一个项目时，会在前面推送一个新屏幕，其中标题是所单击项目的名称。在这个屏幕上，我还想要一个标题按钮，但我似乎无法同时工作。

<Stack.Screen
    name="Editor"
    component={PoetryEditor}
    options={
        ({route}) => ({title: route.params.poetryFormItem.formName})
    }
/>

^这适用于设置标题

<Stack.Screen
    name="Editor"
    component={PoetryEditor}
    options={
        {
            headerRight: () => (
                <Button onPress={() => Keyboard.dismiss()} title="Done"/>
            )
        }
    }
/>

^这适用于添加按钮

我尝试了许多组合来尝试让这两个“选项”同时工作，但无济于事。我不能两次声明“选项”，因为第二个只会取消第一个。

有什么想法吗？

【问题讨论】：

标签： react-native react-navigation stack-navigator

【解决方案1】：

您可以将一个对象传递给options，也可以传递一个回调来返回一个对象以用作选项。

第一种语法意味着它的回调返回带有title 选项的选项，而第二种语法意味着它是带有headerRight 的选项。如果你想要两个都在选项中，那么你只需将两个都放在选项对象中：

<Stack.Screen
  name="Editor"
  component={PoetryEditor}
  options={({ route }) => ({
    title: route.params.poetryFormItem.formName,
    headerRight: () => (
      <Button onPress={() => Keyboard.dismiss()} title="Done" />
    )
  })}
/>

https://reactnavigation.org/docs/screen-options/

【讨论】：