Передача заголовка из React Native навигации в компонент заголовка

Question

Я пытаюсь передать заголовок каждой страницы из реакции навигации в компонент заголовка, но безуспешно. Я почти уверен, что отправляю опору правильно, но я не знаю, как ее использовать. Я пробовал с {props.headerTitle}, но не повезло.

Заголовочный компонент:

export default function Header() {
  return (
    <View style={styles.header}>
      <Text>{props.headerTitle}</Text>
    </View>
  );
}

Навигация

<AuthStack.Navigator initialRouteName={RegisterLogin}>
            <AuthStack.Screen
              name="RegisterLogin"
              component={RegisterLogin}
              options={({navigation, route}) => ({
                headerShown: false,
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: 'red',
                  elevation: 0,
                  shadowOpacity: 0,
                  borderBottomWidth: 0,
                },
              })}
            />
            <AuthStack.Screen
              name="Login"
              component={LoginWithContext}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: 'red',
                  elevation: 0,
                  shadowOpacity: 0,
                  borderBottomWidth: 0,
                },
              })}
            />

Answer 1

Я не совсем понимаю, чего вы пытаетесь достичь sh. Заголовки React Navigation по умолчанию отображают заголовок страницы, когда вы устанавливаете параметр заголовка следующим образом:

<AuthStack.Screen
    name="RegisterLogin"
    component={RegisterLogin}
    options={{
        title: 'Your title here',
        headerStyle: {
            backgroundColor: 'red',
            elevation: 0,
            shadowOpacity: 0,
            borderBottomWidth: 0,
        }
    }}
/>

Есть ли другое поведение, которое вы хотите здесь?

Изменить: предполагая, что вы пытаетесь передать заголовок вашего компонента заголовка для дальнейшего настраиваемого поведения, вы можете сделать это так:

// Header Component
function Header({children}) {
    return (
        <View>
            <Text>{children}</Text>
        </View>
    );
}
// In your navigator
<AuthStack.Screen
    name="RegisterLogin"
    component={RegisterLogin}
    options={{
        title: 'Your title here',
        headerTitle: (children) => <Header {...children}/>,
        headerStyle: {
            backgroundColor: 'red',
            elevation: 0,
            shadowOpacity: 0,
            borderBottomWidth: 0,
        }
    }}
/>

См. документацию на headerTitle: https://reactnavigation.org/docs/stack-navigator/#headertitle