Реагируйте на навигацию - визуализируйте пользовательский заголовок внутри экрана

Question

Используя React Navigation, я бы хотел передать пользовательский компонент заголовка с помощью опции header в navigationOptions.

Проблема заключается в том, что заголовок отображается за пределами экрана.В моем случае я хочу, чтобы он был частью экрана ScrollView, и прокручивался вверх вместе с экраном (не оставаясь липким сверху).

Я попытался установить header в nullв navigationOptions и вручную поместите компонент заголовка в ScrollView экрана, но таким образом я не могу получить доступ к headerProps, которые передаются компоненту заголовка при использовании опции header,headerProps необходимы для доступа к вещам, подобным предыдущей сцене и т. Д.

Есть ли какое-либо решение для этого?

Answer 1

Вы можете сделать это следующим образом:

• Скрыть заголовок из реагировать на навигацию и добавить свой заголовок в компонент экрана, внутри ScrollView:

  const SignedOut = createStackNavigator({
    SignIn: {
      screen: SignIn,
        navigationOptions: {
          header: () => null,
        },
      },
  });
  

  SignIn screen:

  class SignIn extends React.Component<Props, State> {
    render() {
      return (
        <ScrollView style={styles.container}>
         <! -- add header for screen and content -->
        </ScrollView>
      )
    }
  }
  export default SignIn;
  

Таким образом вы можете визуализировать пользовательский компонент заголовка внутри ScrollView.