@uiw/react-native/lib/ActionSheet/index.js

UIW for React Native

import React from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import Modal from '../Modal';
export { default as ActionSheetItem } from './item';
import ActionSheetItem from './item';
let MainWidth = Dimensions.get('window').width;
export default class ActionSheet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVisible: !!props.visible,
      control: 'props'
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.visible === state.stateVisible && state.control === 'state') {
      return {
        control: 'props',
        stateVisible: props.visible
      };
    }

    if (props.visible !== state.stateVisible) {
      if (state.control === 'state') {
        return {
          control: 'props'
        };
      }

      return {
        control: 'props',
        stateVisible: props.visible
      };
    }

    return null;
  }

  onClose = () => {
    this.setState({
      stateVisible: false,
      control: 'state'
    });
  };

  render() {
    const {
      children,
      visible,
      activeOpacity,
      underlayColor,
      cancelText = '取消',
      dividerStyle,
      onCancel,
      containerStyle,
      textStyle,
      ...other
    } = this.props;
    const {
      stateVisible
    } = this.state;
    return <Modal placement="bottom" animationType="fade" // slide  none  fade
    transparent={true} {...other} visible={stateVisible} onClosed={this.onClose}>
        <>
          {React.Children.toArray(children).map((item, index) => <View key={index}>
              {index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
              {React.cloneElement(item, {
            activeOpacity: activeOpacity,
            underlayColor: underlayColor
          })}
            </View>)}
          <View style={StyleSheet.flatten([styles.actionDivider, dividerStyle?.actionDivider])} />
          <ActionSheetItem activeOpacity={activeOpacity} underlayColor={underlayColor} onPress={this.onClose} children={cancelText} containerStyle={containerStyle} textStyle={textStyle} />
        </>
      </Modal>;
  }

}
const styles = StyleSheet.create({
  actionDivider: {
    backgroundColor: 'rgba(197,217,232,.3)',
    width: MainWidth,
    height: 6
  },
  itemDivider: {
    backgroundColor: 'rgba(197,217,232,.3)',
    height: 2,
    width: MainWidth
  }
});