Блог

Главная - Вопросы по программированию - Как скрыть заголовок заголовка, но оставить кнопку «Назад» в React Native

Как скрыть заголовок заголовка, но оставить кнопку «Назад» в React Native

#reactjs #react-native

Вопрос:

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

введите описание изображения здесь

Я попытался использовать headerShown значение false, но оно также удаляет значок кнопки «Назад»

 <Stack.Screen
      name="Video Details"
      component={Video Details}
            headerLeft: ({onPress, focused}) => (
              <TouchableOpacity onPress={onPress}>
                <Image
                  source={icons.back}
                  resizeMode="contain"
                  style={{
                    width: 15,
                    height: 15,
                    marginLeft: 20,
                    tintColor: focused ? 'gray' : 'black',
                  }}
                />
              </TouchableOpacity>
            ),
          }}
        />
  />

Есть ли какое-либо свойство или обходной путь, чтобы просто сохранить значок кнопки «Назад» и скрыть заголовок экрана?

Ответ №1:

Пожалуйста, попробуйте это

  screenOptions={{headerBackTitleVisible:false}}

Комментарии:

1. <Stack.Screen name="BookDetailScreen" component={BookDetailScreen} options={{headerBackTitleVisible: false}}

2. Я попробовал это на одном из единственных экранов, но ничего не вышло.

3. вы можете примерить параметры навигатора

4. но я хочу затронуть только один экран, а не все из них.

5. попробуйте следующие параметры={{headerBackTitleVisible:ложь}}

Ответ №2:

Просто вы можете сделать заголовок ложным и настроить пользовательский компонент для заголовка в соответствии с вашими пожеланиями

Комментарии:

1. Можете привести пример на сайте?

Ответ №3:

попробуйте это:

 <Stack.Screen
  name="Video Details"
  component={Video Details}
  options={{headerBackTitleVisible: false,
           headerLeft: ({onPress, focused}) => (
           <TouchableOpacity onPress={onPress}>
            <Image
              source={icons.back}
              resizeMode="contain"
              style={{
                width: 15,
                height: 15,
                marginLeft: 20,
                tintColor: focused ? 'gray' : 'black',
            />
          </TouchableOpacity>
        ),
      }}
    />

Ответ №4:

Вы можете пойти по лучшему пути. Вы можете скрыть заголовок по умолчанию, используя реквизит headerShown и передав значение false. Он скроет заголовок по умолчанию

 <Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="YOUR_ROUTE_NAME" component={YOURCOMPONENT} />
</Stack.Navigator>

После этого вы можете создать пользовательский компонент заголовка и задать необходимые реквизиты для отображения данных. И сделайте так, чтобы он оставался в верхней части экрана, установив его положение абсолютным, или вы можете использовать flexbox для его оформления.

Метки: ,