Как установить borderRadius (закругленные углы) в строке заголовка React Native?

Я использую Собственный навигатор стека v6 и пытаюсь добавить borderBottomRightRadius и borderBottomLeftRadius, как показано ниже. Он работает в Expo Web, но не в iOS или Android, как показано на снимке экрана ниже.

react native header border radius expo web vs. mobile

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

      <HomeStack.Screen 
        name="HomeScreen" 
        component={HomeScreen} 
        options= {{
          headerTitle: "Home Screen",
          headerStyle: {
            backgroundColor: '#21ABA5',
            borderBottomRightRadius: 20,
            borderBottomLeftRadius: 20,
            overflow: 'hidden',
            background: 'transparent'
          },
          headerTitleStyle: {
            color: '#fff'
          },
          headerTintColor: 'white',
          headerTransparent: true
        }}
      />

у вас есть экспо-закуска, чтобы поделиться? было бы полезно

enzou 23.04.2022 04:39
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
1
97
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Позвольте мне отредактировать мой ответ. Если вы вообще не хотите для Интернета, вы можете создать свой собственный заголовок. Если вы хотите применить ко всем экранам, добавьте его в ScreenOptions Stack.Navigator.

import { getHeaderTitle } from "@react-navigation/elements";

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          header: ({ navigation, route, options, back }) => {
            const title = getHeaderTitle(options, route.name);

            return (
              <MyHeader
                title={title}
                leftButton={
                  back ? (
                    <MyBackButton onPress={navigation.goBack} />
                  ) : undefined
                }
                style={options.headerStyle}
              />
            );
          },
        }}
      />
    </Stack.Navigator>
  );
}

Мне вообще не нужна поддержка сети. Но ваше предложение для варианта Android/iOS добавляет только компонент пользовательского заголовка заглавие. Я не понимаю, как это влияет на саму панель заголовка, которая является родительским компонентом и отвечает за радиус.

Rwzr Q 23.04.2022 15:16

Здравствуйте, Rwzr Q, я думаю, мой отредактированный ответ может вам помочь.

Four 24.04.2022 16:28

Я ценю усилия, но причина, по которой я не выбрал вариант пользовательского заголовка, заключается в том, что некоторые преимущества собственного стека теряются. Из документов: «Обратите внимание, что если вы укажете собственный заголовок, встроенные функции, такие как большой заголовок, панель поиска и т. д., Не будут работать».

Rwzr Q 24.04.2022 23:05

Каковы, по вашему мнению, преимущества использования нативного стека (с настраиваемым заголовком) по сравнению с использованием стека на основе JS?

Rwzr Q 24.04.2022 23:11

Stack имеет некоторые преимущества перед Native Stack, но borderRadius не входит в их число.

Four 25.04.2022 08:32

После дальнейших исследований выясняется, что это невозможно.

Native Stack Navigator зависит от собственных параметров платформы, которые, по-видимому, не поддерживают borderRadius из коробки. Единственная опция, на которую можно повлиять с помощью headerStyle, — это backgroundColor.

Другие варианты включают использование Навигатор стека вместо Native Stack Navigator или создание полностью настраиваемого компонента заголовка. Однако последний теряет большую часть встроенных преимуществ Native Stack Navigator. Таким образом, я перейду на Stack Navigator на основе JS, который гораздо более настраиваемый.

Другие вопросы по теме