Как переопределить предопределенный CSS в React native web

Я конвертирую свое приложение expo в react-native-web, у меня проблема, когда я показываю изображение. по умолчанию react-native-web добавляет класс в Image сposition:absolute. Я хочу переопределить этот класс, вот мой код.

Реагирующий код

<View>
    <Image
                style={{width: '80%', height: '35%',position: 'relative'}}
                source={require('../../assets/images/stn_logo.png')}
                alt="Logo" title="Logo" border="0"
              />
  </View>

преобразованный код из хромированных элементов

<div class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010" style="height: 35%; position: relative; width: 80%;">
    <div class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw" style="background-image: url(&quot;/static/media/stn_logo.153bbaf1.png&quot;);"></div>
    <img alt="" draggable="false" src="/static/media/stn_logo.153bbaf1.png" class="css-accessibilityImage-9pa8cd">
</div>

Здесь вы можете видеть, что My React css добавлен в родительский div, но img тег response-native-web добавил класс css-accessibilityImage-9pa8cd, CSS ниже из chrome

    .css-accessibilityImage-9pa8cd {
    bottom: 0px;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: -1;
}

Я хочу изменить положение на относительное. Я уже установилposition:relativeв элемент React-Native Image.
может ли кто-нибудь помочь мне изменить предопределенный CSS React-native-web

Источник

3 ответа

Я боролся с этим, и, как вы, использовали исходную реакцию expo без извлечения и не имели файла index.html. Один из способов исправить это - определить как высоту, так и ширину вашего изображения, которое отсутствует.

Другой способ, который я только что понял, - это создать файл index.html, на который ссылается @zulqarnain - чтобы создать его, вам нужно запустить expo customize:webи выберите web / index.html, нажмите пробел, а затем нажмите Enter. - см. https://docs.expo.io/guides/customizing-webpack/#editing-static-files для документации.

Оттуда вы можете получить доступ к файлу и переопределить CSS формы. Я добавил это в раздел стилей файла index.html.

      .css-accessibilityImage-9pa8cd{
      inset: 0px;
    height: 100%;
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: -1;
  }
Источник

Хочу добавить, тег не предназначен для отображения изображения. Кажется, что это просто дополнительная доступность, и она невидима по дизайну.

Изображение фактически отображается с помощью элемента непосредственно над элементом и использует собственность с . Его высота и ширина равны 100%, поэтому он получает свой размер от родителя.

«Истинная» проблема заключается в том, что родительский элемент не имеет размеров, поэтому дочерний элемент, который должен отображать изображение, не имеет размеров. У меня есть те же два исправления, что и в другом ответе здесь, но с некоторыми дополнительными пояснениями, почему они работают:

  1. Первое исправление - добавить высоту и ширину компоненту Image в React Native. Это добавляет высоту и ширину к родительскому элементу, который, в свою очередь, дает размеры дочернему элементу, отображающему изображение.
  2. Другое исправление, которое мне кажется немного проблематичным, - это изменить к для скрытого тег. Это работает аналогично первому исправлению, давая размеры родительскому элементу, который дочерний отображение изображения затем наследуется.
Источник

style={{ширина: '80%', высота: '35%', гибкость: 1}}

Источник
Другие вопросы по тегам