modal中怎把transform后的图片放在modal的上面



  • 在modal中使用transform上移图片,在安卓中被另一个view遮挡,求教大神们点拨

    想要的效果
    0_1523110679194_image.png
    实际情况
    0_1523110942195_Screenshot_2018-04-07-22-20-48-056_com.project.png
    代码如下

    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({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    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'
    }
    });



  • 首先使用modal的前提是,一定要确定modal是最上层,而不是相对于当前的更上层。
    另外处理这种简单的图层上下级关系,不需要使用modal,换句话说,处理自己要定义alert这种无关功能的公用组件时可以用modal,其他都不要用modal。或者用modal也要自己处理分层问题,这个下面说。

    分层其实很简单,position:absolute,现在还有了zIndex,要做半透明图层可以使用backgroundColor:“rgba(0,0,0,0.5)”这种。
    非要使用modal,也要在modal内嵌套多个view实现上下层关系。



  • 请使用zindex


登录后回复