封装HUD,如何做成模态(提示出现时背景的控件都不能互动)



  • 前提

    找了很多HUD(安卓似乎叫Toast)的第三方库,大部分在目前0.44以上的RN版本上都不能用了。
    于是找到了一个react-native-lyhud库。
    react-native-lyhud库

    我想用的库,是希望类似SVProgressHUD一样模态的提示。
    看了一下这个库的源码,他的一个props提供了backgroundTouchable来控制这个HUD的容器(其实就是这个HUD的上一层View)是否互动。

    let view = this.state.isShow ?
                <View ref="container" pointerEvents= {this.props.backgroundTouchable ? 'none':'auto'} style={[styles.container, {paddingTop: this.props.positionValue}]}>
                    <Animated.View
                        style={[styles.content, { opacity: this.state.opacityValue }, this.props.style]}
                    >
                        {hud}
                        {this.state.text != '' ?<Text numberOfLines={20} style={this.props.textStyle}>{this.state.text}</Text> : null}
                    </Animated.View>
                </View> : null;
            return view;
    

    我的问题是

    如何让最底部的那个View达到这个效果 —— (这样相当于要更改源码)



  • 找到解决方法了……

    这个库本身就是针对根视图 那个View做的,也就是说,上图中的代码段,返回的其实是一个覆盖整个页面的View组件。他的style如下

    container: {
            position: 'absolute',
            left: 0,
            right: 0,
            top:0,
            bottom:0,
            alignItems: 'center',
            justifyContent:'center',
            padding:48,
        },
    

    那么我们这里的子控件只能通过props回调,将需要添加HUD这个信息,告诉父组件(这里指的是根组件)。


登录后回复