我如何更改 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>;