用transform火position后,图片被遮住了,求教怎么解决

#1

项目中希望的效果如下

现在的了情况是这样的,图二红圈部位应该也是有图的

代码如下,当在安卓机上看时,图片的上半部被遮住了,如把绝对定位换成transform依然不能解决,求教各位前辈解决之道

  render() {
    return (
        <Modal onRequestClose={()=>{}}>
          <View style={styles.upper}>
            <Text style={{fontSize: 50}}>
              我是上半部透明的内容
            </Text>
          </View>
          <View style={styles.down}>
            <Image style={styles.image} source={{uri: 'http://p7.123.sogoucdn.com/imgu/2018/04/20180403110153_956.jpg'}}/>
            <Text>
              下
            </Text>
          </View>
        </Modal>
    );
  }

const styles = StyleSheet.create({
  image:{
    width: 200,
    height: 200,
    position: 'absolute',
    bottom: 200,
    left: 0
  },
  upper: {
    height: height/2,
    width: width,
    backgroundColor: 'black',
    opacity:0.5
  },
  down: {
    height: height/2,
    width: width,
    backgroundColor: 'white',
    position: 'relative'
  }
});
#2

z-index了解一下