我如何更改 React Native 中的 Stack 標題？

Question

我的共享文件夾中有一個 header.js 文件。 我希望它在每個堆棧上使用它來設計 Header 和信息。 在我的 App.js 中，我像這樣加載 header：

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>
  )
};

我怎樣才能像這樣自動更改標題：

<Text>{title}</Text>

Answer 1

你的Header.js應該是這樣的。

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>
  );
};

你的Stack.Navigator應該是這樣的 -

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