反应本性：滚动浏览的透明视图

Question

我有问题设置透明度，以供滚动浏览以外的视图。我正在使用博览会。这个想法是，当您滚动长期滚动浏览内容时，您应该在底部视图后面看到它。我已经尝试了obacity属性，并使用rgba（x，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.expo.dev/@wastelandtime/scrollview-scrollview-time/scrollview-transparansparency

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

Answer 1

可以在没有位置的情况下实现它：'Absolute'，并以这种方式使用负边距，

  bottomPart: {
    height: 50,
    backgroundColor: 'transparent',
    marginTop: -50, // add this
  }

使用负面边距可以将文本推到上方的

零食链接 https://snack.expo.dev/cjbbhsczg

Answer 2

将Bottompart位置设置为绝对和底部：0

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

您应该得到 this 。

您可能还需要将marginbottom：50，添加到卷轴内部的最后一个元素，如果您在底部的底部中放置一个实体元素。