React Native Expo中ScrollView外部View透明效果失效如何解决？

透明度属性本身没有失效，该现象由React Native的原生视图渲染规则导致：

• 现有代码中ScrollView与底部bottomPart为同级节点，父容器默认纵向flex布局下，ScrollView实际渲染高度为父容器高度减去bottomPart占据的50高度，ScrollView的所有滚动内容仅会在自身布局边界内绘制，边界外不会渲染任何滚动内容。
• 同级节点后渲染的bottomPart层级高于先渲染的ScrollView，它所在的底部50高度区域下方不存在ScrollView的内容层，只有父容器背景，因此即便设置全透明，也无法看到滚动内容透出。
• ScrollView内部absolute定位的透明View能正常展示效果，是因为该节点属于ScrollView子元素，处于ScrollView渲染范围内，因此透明表现符合预期。

两种方案都可以实现滚动内容透出底部透明View的效果，按需选择即可。

方案1：将底部固定视图移入ScrollView内部 #

这是兼容性最好的实现方式：

1. 把bottomPart节点从ScrollView外部挪到ScrollView标签内部，和其他滚动内容同级
2. 修改bottomPart样式为绝对定位固定在滚动区域底部：

bottomPart: {
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  height: 50,
  backgroundColor: 'transparent',
  zIndex: 10
}

3. 给ScrollView添加contentContainerStyle={{ paddingBottom: 50 }}，避免滚动到最底部时内容被固定栏遮挡。

方案2：让ScrollView撑满整个父容器 #

如果不想把底部固定栏放到ScrollView的节点树中，可以调整ScrollView的布局方式：

1. 给ScrollView设置绝对定位，撑满整个父容器的可用区域：

<ScrollView 
  style={{
    position: 'absolute',
    top: Constants.statusBarHeight,
    left: 0,
    right: 0,
    bottom: 0
  }} 
  contentContainerStyle={{ paddingBottom: 50 }}
>
{/* 原有滚动内容 */}
</ScrollView>

2. 保持bottomPart节点和ScrollView同级、且在ScrollView之后渲染（保证层级更高），原有透明背景样式不需要修改。
   这种方式下ScrollView的渲染范围覆盖了底部View所在区域，透明的底部View就可以正常透出下层的滚动内容。

• 不要通过设置父容器的opacity属性实现透明，该属性会让所有子视图连带继承透明度，无法实现仅背景透明、文字不透明的效果。
• 如果需要半透明背景，直接给底部View设置backgroundColor: 'rgba(255,255,255,0.5)'这类带alpha通道的色值即可，两种方案下都能正常生效。

内容的提问来源于stack exchange，提问作者Wasteland