“设置”选项卡中显示的配置文件标题而不是设置标题 - React Native/Expo

Question

我正在使用 React Native 和 Expo。

我遇到一个问题，配置文件标题显示在“设置”选项卡中，而设置标题显示在其下方。

图片：

图片

期望的结果是仅在“设置”选项卡中显示设置标题，并且仅在配置文件选项卡中显示配置文件标题。

我的设置代码显示设置标题 -

const Settings = ({ handleLogout }) => (
  <SettingsStack.Navigator>
    <SettingsStack.Screen
      name="SettingsList"
      children={(props) => <SettingsList {...props} handleLogout={handleLogout} />}
      options={{ title: 'Settings', headerShown: true, headerTitleAlign: 'center', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } }}
    />
    <SettingsStack.Screen
      name="SettingTab"
      component={SettingTab}
      options={({ route }) => ({ title: route.params.settingName, headerShown: true, headerTitleAlign: 'center', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } })}
    />
  </SettingsStack.Navigator>
);

我的 ProfileStack.Screen：- 标题按钮是右上角的设置图标，可导航至“设置”

<ProfileStack.Navigator>
      <ProfileStack.Screen
        name="Profile"
        options={({ route }) => ({
          headerShown: route.name === "Profile", // Only show header when route name is 'Profile'
          headerTitle: '', // Set header title to an empty string
          headerRight: () => (
            <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
              <Item
                title="Settings"
                iconName="settings"
                onPress={() => navigation.navigate('Settings')}
              />
            </HeaderButtons>
          ),
        })}
      >
        {props => (
          <Profile
            {...props}
            userProfilePicture={userProfilePicture}
            onChangeProfilePicture={setUserProfilePicture}
          />
        )}
      </ProfileStack.Screen>
      <ProfileStack.Screen
        name="Settings"
        options={{ headerShown: false }}
      >
        {props => <Settings {...props} handleLogout={handleLogout} />}
      </ProfileStack.Screen>
    </ProfileStack.Navigator>

我的应用程序导航器：

const getheaderTitle = (route) => {
  const routeName = route.name;

  if (routeName === 'Home') {
    return 'Home';
  } else if (routeName === 'Profile') {
    return 'Profile';
  }

  return ''; // Return an empty string if the route name is not recognized
};

const AppNavigator = ({ userProfilePicture, setUserProfilePicture, handleLogout }) => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person';
          } else {
            return null;
          }

          return <MaterialIcons name={iconName} size={size} color={color} />;
        },

        headerTitle: getheaderTitle(route),

        tabBarActiveTintColor: 'rgb(255, 255, 255)',
        tabBarInactiveTintColor: 'rgb(114, 118, 122)',
        tabBarStyle: { backgroundColor: 'rgb(0, 0, 0)' },
      })}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Home',
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)', // Customize header background color
          },
          headerTintColor: 'white', // Customize header text color
        }}
        initialParams={{ userProfilePicture }}
      />
      <Tab.Screen
        name="Profile"
        children={() => (
          <ProfileStackScreen
            userProfilePicture={userProfilePicture}
            setUserProfilePicture={setUserProfilePicture}
            handleLogout={handleLogout}
          />
        )}
        options={({ route }) => ({
          title: 'Profile',
          headerTitle: getheaderTitle(route),
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)', // Customize header background color
          },
        })}
      />
    </Tab.Navigator>
  );

Answer 1

您遇到的问题是由于导航结构造成的。您的设置屏幕是

ProfileStack.Navigator

和

SettingsStack.Navigator

的一部分。当您从配置文件导航到“设置”时，它会尝试从

ProfileStack.Navigator

渲染“设置”屏幕，其中包括自己的标题以及

SettingsStack.Navigator

中的标题。

要解决此问题，您应该以避免嵌套相同屏幕的方式构建导航器。

这个简单的例子可能看起来像这样：

const RootStack = createStackNavigator();

const RootStackScreen = () => (
 <RootStack.Navigator>
 <RootStack.Screen name="AppTabs" component={AppNavigator} options=. 
{{headerShown: false}}/>
 <RootStack.Screen name="Settings" component={Settings} />
 </RootStack.Navigator> );

 const ProfileStack = createStackNavigator();

 const ProfileStackScreen = ({ userProfilePicture, 
    onChangeProfilePicture, handleLogout }) => (
    <ProfileStack.Navigator>
    <ProfileStack.Screen
     name="Profile"
     component={Profile}
     initialParams={{ userProfilePicture, onChangeProfilePicture }}
     options={({ navigation }) => ({
     headerTitle: '',
     headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Settings"
          iconName="settings"
          onPress={() => navigation.navigate('Settings')}
        />
      </HeaderButtons>
    ),
  })}
/>
 </ProfileStack.Navigator> );

从

ProfileStack.Navigator

中删除SettingsStack.Screen并修改

AppNavigator

const AppNavigator = ({ userProfilePicture, setUserProfilePicture, 
handleLogout }) => {
 return (
<Tab.Navigator
  //... your code
>
  <Tab.Screen
    name="Home"
    //... your code
  />
  <Tab.Screen
    name="Profile"
    children={() => (
      <ProfileStackScreen
        userProfilePicture={userProfilePicture}
        onChangeProfilePicture={setUserProfilePicture}
        handleLogout={handleLogout}
      />
    )}
    //... your code
  />
</Tab.Navigator> ); };

然后在使用导航器的主组件中，使用 RootStackScreen 而不是 AppNavigator

export default function App() {
return (
<NavigationContainer>
  <RootStackScreen />
</NavigationContainer>
);
}

这是导航结构的一个粗略示例，当然，您必须对其进行调整以满足您的应用程序需求。