项目中希望的效果如下
现在的了情况是这样的,图二红圈部位应该也是有图的
代码如下,当在安卓机上看时,图片的上半部被遮住了,如把绝对定位换成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'
}
});