headerShown、headerTitle 和其他选项在屏幕上不起作用

Question

我是 React Native 的新手，我正在尝试创建一些仅供学习和测试的东西...

现在，我正在尝试在 "logged area" 中创建一个带有登录屏幕和其他一些屏幕的应用程序。所以，我想在 "logged area" 屏幕上使用 Header 栏，而不是在登录屏幕上。

为此，我尝试使用 React-Navigation，并在 Stack.Screen 上使用选项。但是没有用...

这是我当前的代码：

[...]
const Stack = createStackNavigator();
[...]
<NavigationContainer>
  <Stack.Navigator headerMode="screen">
    <Stack.Screen headerTitle="Test" headerShown={false} screenOptions={{headerTitle: 'Test', headerShown: false}} name="Login" component={Login} />
  </Stack.Navigator>
</NavigationContainer>
[...]

我正在测试 headerTitle 和 headerShown 是否作为 属性 或 screenOptions 选项...但没有任何效果。

现在，我的屏幕在 header 中有一个 "Login" 标题（忽略 headerTitle 属性 和选项）并且显示 header（忽略headerShown 属性 和选项）。

谁能告诉我哪里做错了？

Answer 1

screenOptions 是 Stack.Navigator 的道具，而不是 Stack.Screen.

headerTitle and headerShown都是options，不是props，所以必须在options里面。

所以要么将 'screenOptions' 更改为 'options':

<Stack.Screen options={{headerTitle: 'Test', headerShown: true}} name="Login" component={Login} />

或将其移至 Stack.Navigator（注意，它将应用于导航器内的所有屏幕）：

<Stack.Navigator headerMode="screen" screenOptions={{headerTitle: 'Test', headerShown: true}}>