时间戳

首页 > 解决方案 > headerShown、headerTitle 和其他选项在屏幕上不起作用

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

问题描述

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

现在，我正在尝试在“登录区域”中创建一个带有登录屏幕和其他一些屏幕的应用程序。所以，我想在“登录区域”屏幕上使用标题栏，而不是在登录屏幕上。

为此，我正在尝试使用带有选项的 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'选项工作......但没有任何工作。

现在，我的屏幕在标题中有一个“登录”标题（忽略headerTitle属性和选项）并显示标题（忽略headerShown属性和选项）。

有人可以告诉我我做错了什么吗？

标签： react-nativereact-native-androidreact-navigationreact-navigation-stack

解决方案

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

headerTitle和headerShown都是选项而不是道具，因此它们必须在选项内部。

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

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

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

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

推荐阅读