当组件是平面列表时，如何使 headerLargeTitle 显示为大标题

Question

我有一个

FlatList

组件，我希望标题很大。我定义导航器如下

export const SamplerStackNavigator = () => (
  <Stack.Navigator
    screenOptions={{
      headerLargeTitle: true,
    }}
  >
    <Stack.Screen name="Flat List" options={{}} component={TheList} />
  </Stack.Navigator>
);

但是，它只显示小标题。我可以手动向下滚动以显示大标题，但我想让它默认显示为大标题。

https://snack.expo.dev/@trajano/multi-tab-navigation-with-refresh

在“主页”选项卡上我有

当我切换到其他选项卡时（默认情况下标题很小）

你可以把它拉下来，它就会渲染成我想要的尺寸。

Answer 1

编辑：OP正在使用本机堆栈而不是来自react-navigation的堆栈导航。

您可以使用 https://github.com/software-mansion/react-native-screens/tree/master/native-stack#headertitlestyle 属性来设置样式。

支持的样式属性是

• 字体家族
• 字体大小
• 字体粗细
• 颜色

---

我能给出的最简单的解决方案是使用 prop

headerTitleStyle

（如果您使用的是内置标头）。

https://reactnavigation.org/docs/stack-navigator/#headertitlestyle

对于定制，您可以根据您的需求构建自己的元素和样式。

查看现场小吃演示 https://snack.expo.dev/@raajnadar/custom-navigation-title

Answer 2

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        options={{
          headerLargeTitle: true,
        }}
        component={HomeScreen}
      />
    </Stack.Navigator>
  );
}

在此处查找有关 iOS 的更多详细信息

Answer 3

您可以在这里找到有效的示例。 https://github.com/react-navigation/react-navigation/blob/a2993721f59d92257cef5608c33a993f8d420a80/example/src/Screens/NativeStack.tsx#L134