react native 组件封装进阶 ActionSheet动作面板

开发中常用到：比如：选择相册，选择拍照等，这个底部弹出框选择，我们称之为 action sheet动作面板

actionsheet.gif

这个组件写起来比较有意思 ，巧妙的使用了this.props. children 可以自定义 每个 ActionDom
下面看下代码：

'use strict';

import React, { Component } from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * import { ActionSheet, ActionDom } from '../components/actionsheet';
    {this.setState({showAction:false})}}
          >
          {
             alert("你点击了按钮一")
           }}
          />
           {
             alert("你点击了按钮一")
           }}
          />
        

 */

export class ActionSheet extends Component {
  static defaultProps = {
    animationType: 'slide',
    title: '',
  };
  static propTypes = {
    animationType: PropTypes.string, //模态弹出效果
    ActionItem: PropTypes.element, //动作名称数组的形式
    ActionArray: PropTypes.array,
    showAction: PropTypes.bool,
    cancel: PropTypes.func, // 取消操作
    title: PropTypes.string, //头部
    titleTextStyle: PropTypes.object, //标题样式
    children: PropTypes.element,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      animationType,
      showAction,
      title,
      titleTextStyle,
      cancel,
    } = this.props;

    return (
       {}}
        visible={showAction}>
        
          
            {title ? (
              
                {title}
                
                  
                
              
            ) : null}
            {this.props.children}
            
              取消
            
          
        
      
    );
  }
}

export class ActionDom extends Component {
  static defaultProps = {
    actionName: '按钮一',
  };
  static propTypes = {
    actionName: PropTypes.string, //模态弹出效果
    onPress: PropTypes.func,
  };
  render() {
    const { actionName, onPress } = this.props;
    return (
      
        {actionName}
      
    );
  }
}

const styles = StyleSheet.create({
  modelView: {
    flex: 1,
    backgroundColor: 'rgba(40,40,40,0.4)',
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
  },
  bottomView: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
  },
  TitleView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    paddingTop: 10,
    paddingBottom: 10,
  },
  titleText: {
    fontSize: 14,
    color: '#aaa',
  },
  closeView: {
    position: 'absolute',
    right: 15,
    top: 8,
  },
  close: {
    fontFamily: 'iconfont',
    fontSize: 20,
    color: '#ccc',
  },
  items: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    height: 50,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  cancl: {
    borderTopWidth: 4,
    borderTopColor: '#eee',
  },
  itemsText: {
    fontSize: 15,
    color: '#333',
  },
});

使用

import { ActionSheet, ActionDom } from '../components/actionsheet';
    {this.setState({showAction:false})}}
          >
          {
             alert("你点击了按钮一")
           }}
          />
           {
             alert("你点击了按钮一")
           }}
          />