Как выровнять заголовок и значок заголовка по центру панели заголовка в React Native Navigation

Question

Проблема:

Я создал приложение, поддерживающее реакцию, и в нем я реализовал заголовок с заголовком и значком. В представлении это выглядит так.

Я хочу разместить заголовок и значок вместо зеленой точки. Я много пытался найти пути к этому, но не смог. Это мой код верхней панели.

<AssestmentStack.Navigator initialRouteName="assestments">
    <AssestmentStack.Screen
      name="assestments"
      component={ExistingPatientHomeScreen}
      options={(props) => ({
        headerShown: true,
        headerLeft: () => (
          <Icon
            name="align-left"
            size={normalize(20)}
            color="#aaaaaa"
            onPress={() => props.navigation.toggleDrawer()}
          />
        ),
        headerTitleAlign: 'center',
        headerTitle: () => <HeaderTitle title={'Explore'} />,
        headerStyle: {
          backgroundColor: '#f2f2f2',
          height: '35%',
        },
        headerTransparent: false,
        headerLeftContainerStyle: {
          marginLeft: '8%',
        },
        headerStatusBarHeight: 0,
      })}
    />
  </AssestmentStack.Navigator>

Может ли кто-нибудь помочь мне найти способ сделать это ?. Если кто-то может помочь мне в этом, я очень благодарен. Спасибо.

Answer 1

Отключить:

      headerStyle: {
          backgroundColor: '#f2f2f2',
          height: '35%',
        },
        headerTransparent: false,
        headerLeftContainerStyle: {
          marginLeft: '8%',
        },

Результат

<AssestmentStack.Navigator initialRouteName="assestments">
    <AssestmentStack.Screen
      name="assestments"
      component={ExistingPatientHomeScreen}
      options={(props) => ({
        headerShown: true,
        headerLeft: () => (
          <Icon
            name="align-left"
            size={normalize(20)}
            color="#aaaaaa"
            onPress={() => props.navigation.toggleDrawer()}
          />
        ),
        headerTitleAlign: 'center',
        headerTitle: () => <HeaderTitle title={'Explore'} />,
        headerStyle: {
          backgroundColor: '#f2f2f2',
        },
      })}
    />