React Native移除Native Base后，Android端替代ActionSheetIOS方案咨询

iOS 端直接用原生组件 #

React Native 内置的 ActionSheetIOS 完全能满足需求，直接调用 showActionSheetWithOptions 方法即可实现图中效果：

import { ActionSheetIOS } from 'react-native';

const openActionSheet = () => {
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ['分享到朋友圈', '分享给好友', '保存图片', '取消'],
      cancelButtonIndex: 3,
      // 如需高亮危险操作，可设置 destructiveButtonIndex
    },
    (buttonIndex) => {
      switch (buttonIndex) {
        case 0:
          // 处理分享朋友圈逻辑
          break;
        case 1:
          // 处理分享好友逻辑
          break;
        case 2:
          // 处理保存图片逻辑
          break;
        case 3:
          // 取消操作，无需额外处理
          break;
      }
    }
  );
};

Android 端自定义 Modal 实现 #

Android 没有原生对应组件，用 React Native 基础组件（Modal、View、TouchableOpacity）自己实现即可，样式完全可控：

自定义 ActionSheet 组件 #

import { Modal, View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';

const CustomActionSheet = ({ visible, onClose, options, onSelect }) => {
  const screenHeight = Dimensions.get('window').height;

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      {/* 遮罩层，点击关闭菜单 */}
      <TouchableOpacity 
        style={styles.overlay} 
        onPress={onClose}
        activeOpacity={1}
      >
        {/* 菜单容器，从底部滑入 */}
        <View style={styles.actionSheetWrap}>
          {/* 操作选项列表 */}
          {options.map((item, index) => (
            <TouchableOpacity
              key={index}
              style={styles.optionBtn}
              onPress={() => {
                onSelect(index);
                onClose();
              }}
            >
              <Text style={styles.optionText}>{item.label}</Text>
            </TouchableOpacity>
          ))}
          {/* 取消按钮 */}
          <TouchableOpacity style={styles.cancelBtn} onPress={onClose}>
            <Text style={styles.cancelText}>取消</Text>
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  actionSheetWrap: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    width: '100%',
    paddingVertical: 12,
  },
  optionBtn: {
    paddingVertical: 18,
    paddingHorizontal: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#f5f5f5',
  },
  optionText: {
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
  cancelBtn: {
    marginTop: 8,
    paddingVertical: 18,
    paddingHorizontal: 24,
  },
  cancelText: {
    fontSize: 16,
    color: '#999',
    textAlign: 'center',
  },
});

export default CustomActionSheet;

使用自定义组件 #

import CustomActionSheet from './CustomActionSheet';
import { useState } from 'react';
import { Button } from 'react-native';

const YourComponent = () => {
  const [sheetVisible, setSheetVisible] = useState(false);
  const actionOptions = [
    { label: '分享到朋友圈' },
    { label: '分享给好友' },
    { label: '保存图片' },
  ];

  const handleOptionSelect = (index) => {
    switch (index) {
      case 0:
        // 执行分享朋友圈逻辑
        break;
      case 1:
        // 执行分享好友逻辑
        break;
      case 2:
        // 执行保存图片逻辑
        break;
    }
  };

  return (
    <>
      <Button 
        title="打开操作菜单" 
        onPress={() => setSheetVisible(true)} 
      />
      <CustomActionSheet
        visible={sheetVisible}
        onClose={() => setSheetVisible(false)}
        options={actionOptions}
        onSelect={handleOptionSelect}
      />
    </>
  );
};

export default YourComponent;

跨平台统一封装 #

可以写个 Hook，根据平台自动切换实现，调用更方便：

import { Platform } from 'react-native';
import { ActionSheetIOS } from 'react-native';
import CustomActionSheet from './CustomActionSheet';
import { useState } from 'react';

// 封装成 Hook，组件中直接用
export const useActionSheet = () => {
  const [visible, setVisible] = useState(false);
  const [currentOptions, setCurrentOptions] = useState([]);
  const [currentHandler, setCurrentHandler] = useState(() => () => {});

  const show = (options, onSelect) => {
    if (Platform.OS === 'ios') {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: options.map(opt => opt.label).concat('取消'),
          cancelButtonIndex: options.length,
        },
        (idx) => {
          if (idx !== options.length) onSelect(idx);
        }
      );
      return;
    }
    // Android 用自定义组件
    setCurrentOptions(options);
    setCurrentHandler(onSelect);
    setVisible(true);
  };

  const close = () => setVisible(false);
  const handleSelect = (index) => {
    currentHandler(index);
    close();
  };

  const SheetComponent = () => (
    <CustomActionSheet
      visible={visible}
      onClose={close}
      options={currentOptions}
      onSelect={handleSelect}
    />
  );

  return { show, SheetComponent };
};

使用 Hook #

import { useActionSheet } from './useActionSheet';
import { Button } from 'react-native';

const YourComponent = () => {
  const { show, SheetComponent } = useActionSheet();
  const actionOptions = [
    { label: '分享到朋友圈' },
    { label: '分享给好友' },
    { label: '保存图片' },
  ];

  return (
    <>
      <Button 
        title="打开操作菜单" 
        onPress={() => show(actionOptions, (index) => {
          // 处理对应选项逻辑
        })} 
      />
      <SheetComponent />
    </>
  );
};

这样完全不需要任何第三方库，iOS 用原生组件保证系统一致性，Android 自定义组件样式可以完全匹配你的需求。

内容的提问来源于stack exchange，提问作者gkeenley