Блог

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

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

^ Это работает для добавления кнопки

Я перепробовал множество комбинаций, чтобы попытаться заставить оба этих «варианта» работать одновременно, но безрезультатно. Я не могу объявить «параметры» дважды, потому что второй просто отменит первый.

Есть какие-нибудь идеи?

Вы можете либо передать объект options , либо передать обратный вызов, который возвращает объект для использования в качестве параметров.

Первый синтаксис означает, что обратный вызов возвращает параметры с title параметром, а второй означает, что это параметры с headerRight параметром . Если вы хотите, чтобы оба параметра были в параметрах, вы просто помещаете оба в объект options:

 <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/