React-native：ScrollView 上的透明视图答案

【问题标题】：React-native: transparent view over ScrollViewReact-native：ScrollView 上的透明视图
【发布时间】：2022-06-10 20:30:04
【问题描述】：

我在为 ScrollView 之外的视图设置透明度时遇到问题。我正在使用世博会。这个想法是，当您滚动长滚动视图内容时，您应该即将在底部视图后面看到它。我试过opacity 属性以及使用rgba(x,x,x, 0.5) 设置背景颜色，但没有运气。相对于其背后的滚动视图内容而言，看起来 Scrollview 之外的任何内容都是完全不透明的。

基本代码（零食链接如下）：

  export default function App() {
  return (
    <View style={styles.container}>
    <ScrollView>
    <View style={styles.transparentWrapper}>
      <Text style={styles.textElement}>This is some text wrapped in a transparent View</Text>
    </View>
      <Text style={styles.paragraph}>
      Lorem....
      </Text>
   <Text style={styles.paragraph}>
      Lorem ...
      </Text>
      </ScrollView>
      <View style={styles.bottomPart}>
      <Text style={styles.textElement}>This is some text. Its wrapping view is transparent but I cannot see the lorem text underneath it.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
  },
  paragraph: {
    fontSize: 30,
    marginBottom: 15,
  },
  textElement: {
    color: 'blue',
  },
  transparentWrapper: {
    position: 'absolute',
    height: 100,
    justifyContent: 'center',
    top: 450,
    left: 50,
    backgroundColor: 'transparent',
    zIndex: 999,
  },
  bottomPart: {
    height: 50,
    backgroundColor: 'transparent',
  }
});

完整的小吃在这里： https://snack.expo.dev/@wastelandtime/scrollview-transparency

这是预期的结果。顶部的蓝色文本被包裹在一个透明的视图中（这就是它应该看起来的样子）这不是问题，因为它在 ScrollView 中。就其背后的滚动内容而言，底部的蓝色文本似乎不尊重任何透明度（我只想在包装视图上看到具有完全透明度的蓝色文本。

【问题讨论】：

它似乎正在处理零食，如果我删除不透明度或更改 alpha 通道我可以看到效果。
@AseemGautam 上面的零食似乎不适合我。我在 iPhone 上的 Expo Go 以及零食代码右侧的 Android/iOS 模拟设备上进行了尝试。底部视图对我来说根本不透明（即，我根本看不到任何滚动视图 lorem ipsum 文本）
请将容器的背景色改为红色。然后去除不透明度。更新 Alpha 通道。你会看到区别。
好的。我已将 .container 背景颜色更改为红色，并且可以看到底部视图有一个红色调，表示某种程度的透明度，但我仍然看不到 lorem ipsum 文本（我已将 alpha 通道更改为 0.1 并删除opacity 属性）。
实际上，我已将滚动视图上的 contentContainerStyle 更改为绿色背景，但它并未反映在底部视图上的任何色调变化中，因此不确定是否真的有效。

标签： react-native transparency

【解决方案1】：

将bottomPart位置设置为绝对：

bottomPart: {
    height: 50,
    backgroundColor: 'transparent',
    position: 'absolute',
    bottom: 0
  }

我得到this 结果。

【讨论】：