我如何更改 React Native 中的 Stack 标题？

Question

I have a header.js file in my shared folder. I want it to use it on every stack to design the Header and Information. In my App.js I load the header like this:

App.js
...
    <Stack.Navigator screenOptions={{
      headerTitle: () => <Header /> (<-- Here the Header.js file )
    }} initialRouteName="AppTabs">
      <Stack.Screen name="AppTabs" component={AppTabs} />
    </Stack.Navigator>

Header.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Entypo } from '@expo/vector-icons'; 

const Header = ({ navigation }) => {
  console.log(navigation);
  return (
    <View style={styles.header}>
      <Entypo name="menu" size={24} color="black" />
      <View>
        <Text style={styles.headerText}>TITEL TO CHANGE BUT HOW?</Text>
      </View>
    </View>
  )
};

How Can I change the title automaticly like this:

<Text>{title}</Text>

Answer 1

Your Header.js should look like this.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Entypo } from '@expo/vector-icons';

const Header = ({ children }) => {
  console.log(children);
  return (
    <View style={styles.header}>
      <Entypo name="menu" size={24} color="black" />
      <View>
        <Text style={styles.headerText}>{children}</Text>
      </View>
    </View>
  );
};

Your Stack.Navigator should look like this -

<Stack.Navigator
  screenOptions={{
    headerTitle: (props) => <Header {...props} />, // this prop contains screen name
  }}
  initialRouteName="AppTabs">
  <Stack.Screen name="AppTabs" component={AppTabs} />
</Stack.Navigator>;