Stack.Screen 中的 React Native 多个选项（params title + headerRight button）

Question

我有一叠。第一个屏幕是一个项目列表，当你点击一个项目时，一个新的屏幕会被推到前面，其中的标题是所点击项目的名称。在此屏幕上，我还想要一个 header 按钮，但我似乎无法同时使用这两个按钮。

<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"/>
            )
        }
    }
/>

^这适用于添加按钮

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

有什么想法吗？

Answer 1

您可以将对象传递给 options 或传递回调，其中 returns 对象用作选项。

第一个语法表示它是回调 returns 选项和 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/

Stack.Screen 中的 React Native 多个选项（params title + headerRight button）

React Native multiple options in Stack.Screen (params title + headerRight button)

react-native

react-navigation

stack-navigator