7

我正在将我的 expo 应用程序转换为 react-native-web，当我显示Image时出现问题。默认情况下 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>

从 chrome 元素转换的代码

<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 添加到 Parent div 但是img标签 react-native-web 添加了一个 class 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;
}

我想将位置覆盖到relative。我已经设置position:relative为 React-Native Image 元素。
谁能帮我更改 React-native-web 的预定义 CSS

4

2 回答 2

2

我在这个问题上苦苦挣扎，就像你在使用非弹出的 expo react native 并且没有 index.html 文件一样。解决此问题的一种方法是为丢失的图像定义高度和宽度像素。

我刚刚想到的另一种方法是创建@zulqarnain 提到的 index.html 文件——要创建它，您需要运行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;
  }
于 2021-03-10T04:24:21.883 回答
0

我想补充<img>一点，标签并不是用来显示图像的。它似乎只是为了增加可访问性，并且在设计上是不可见的。

图像实际上是使用<div>元素正上方的<img>元素显示的，并使用带有 的background-image属性background-size:cover。它的高度和宽度为 100%，因此它从 parent 获取它的大小<div>。

“真正的”问题是父级没有尺寸，因此<div>应该显示图像的子级没有尺寸。这是与此处的另一个答案相同的两个修复程序，但对它们的工作原理进行了一些补充说明：

  1. 第一个修复是在 React Native 中为 Image 组件添加高度和宽度。这为 parent 增加了高度和宽度<div>，这反过来又为<div>显示图像的孩子提供了尺寸。
  2. 另一个对我来说似乎有点问题的修复方法是更改position:absolute​​为position:relative隐藏<img>标签。这与第一个修复类似，通过为显示图像<div>的子代<div>随后继承的父代提供尺寸。
于 2021-05-26T15:52:20.260 回答