React Native несколько вариантов в Stack.Screen (заголовок параметров + кнопка headerRight)

У меня есть стек. Первый экран представляет собой список элементов, и когда вы нажимаете на элемент, перед ним появляется новый экран, где заголовок представляет собой имя элемента, по которому был сделан щелчок. На этом экране мне также нужна кнопка заголовка, и я не могу заставить обе работать одновременно.

<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 stack-navigator react-navigation
person Micsupreeme    schedule 01.01.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете либо передать объект 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/

person satya164    schedule 01.01.2021