自定义分享蒙版效果

先上个效果:

分享.gif

// 定义所需的常量
const {width, height} = Dimensions.get('window');
const kShareViewHeight = 150;
const kAnimatDuration = 200; // 毫秒=>0.2秒
const kShareTypes = ['QQ', '微信'];
const kShareTypeIcons = ['kq_QQ', 'kq_wx'];

export default class ShareMaskView extends Component {
      // 定义动画初始值
        // 蒙版显示/消失的渐变动画值
     maskShowOpacityValue = new Animated.Value(0);
       // 分享视图显示/消失的动画值(设置style的bottom)
    shareViewBottomPositionValue = new Animated.Value(0);
    
   state = {
      isShow: false
    }

   render() {
         if (!this.state.isShow) return null;

         // 设置动画输入输出值, 用于修改style(布局)
         let styleOption = {
            positionBottom: this.shareViewBottomPositionValue.interpolate({
               inputRange: [0, 1],
               outputRange: [-kShareViewHeight, 0],
            }),

            maskOpacity: this.maskShowOpacityValue.interpolate({
               inputRange: [0, 1],
               outputRange: [0, 0.9]
            }),
         };

         return (
             <ChannelContainer
                 {...styleOption}
                 onCloseMask={this.closeMaskView}
                 shareItemOnPress={this.shareItemOnPress}
             />
         );
      }

// 显示蒙版
showMaskView = ()=>{
    this.setState({isShow: true}, ()=>{
      // Animated.parallel: 平行的; 按钮同时执行动画;  Animated.parallel() –同时开始一个动画数组里的全部动画。默认情况下，如果有任何一个动画停止了，其余的也会被停止
      // Animated.sequence() –按顺序执行一个动画数组里的动画，等待一个完成后再执行下一个。如果当前的动画被中止，后面的动画则不会继续执行. sequence: 顺序
     Animated.parallel([
         // 显示蒙版动画
         Animated.timing(this.maskShowOpacityValue, {
            toValue: 1,
            duration: kAnimatDuration,
         }),

         Animated.timing(this.shareViewBottomPositionValue, {
            toValue: 1,
            duration: kAnimatDuration,
         })
     ]).start();
  });
}

// 关闭蒙版
closeMaskView = ()=>{
  Animated.parallel([
      // 收起分享视图
      Animated.timing(this.shareViewBottomPositionValue, {
         toValue: 0,
         duration: kAnimatDuration,
      }),
      // 蒙版消失(透明度为 0)
      Animated.timing(this.maskShowOpacityValue, {
         toValue: 0,
         duration: kAnimatDuration,
      }),
  ]).start(()=>{
     this.setState({isShow: false});
  });
};

// 点击三方分享item
shareItemOnPress = (title)=>{
   alert(title);
};

const ChannelContainer = ({positionBottom, maskOpacity,  coverPositionLeft, onCloseMask,  shareItemOnPress})=>{
   return (
       // 蒙版动画视图
   <Animated.View style={[styles.container, {opacity: maskOpacity, left: coverPositionLeft}]}>
      {/*添加点击蒙版事件*/}
      <TouchableOpacity
          activeOpacity={1}
          style={{flex: 1}}
          onPress={onCloseMask}
      />

      {/*分享视图的动画视图*/}
      <Animated.View style={[styles.shareViewContainer, {bottom: positionBottom}]}>
         {kShareTypes.map((title, index)=>{
            return(
                <TouchableOpacity
                    activeOpacity={0.8}
                    key={`${title}-${index}`}
                    onPress={()=>shareItemOnPress(title)}
                >
                   <Image
                       source={{uri: kShareTypeIcons[index]}}
                       style={{width: 52, height: 52}}
                   />

                   <Text style={styles.titleStyle}>{title}</Text>
                </TouchableOpacity>
            );
         })}

      </Animated.View>
   </Animated.View>
  );
};

const styles = StyleSheet.create({
   container: {
      height: height, // 设置屏幕高度
      backgroundColor: 'rgba(1, 1, 1, 0.5)',

     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
},

shareViewContainer: {
  width: width,
  height: kShareViewHeight,
  backgroundColor: 'white',

  flexDirection: 'row',
  justifyContent: 'space-around',
  alignItems: 'center',

  // 设置分享视图处于底部(bottom的值利用动画设置)
  position: 'absolute',
  left: 0,
  right: 0,
},

titleStyle: {
    fontSize: 15,
    color: 'black',
    marginTop: 10,
    textAlign: 'center'
  }
});

使用:
<ShareView ref={shareView=>this.shareView=shareView} />

就可以使用 this.shareView 来调用 showMaskView, closeMaskView