EXPO:设置react-native-action-sheet

npm install react-native-action-sheet

yarn add react-native-action-sheet

expo install expo-dev-client
npx pod-install ios

pod 'RNActionSheet', :path => '../node_modules/react-native-action-sheet'

import React, { useRef } from 'react';
import ActionSheet from 'react-native-action-sheet';

const MyComponent = () => {
  const actionSheetRef = useRef();

  const options = [
    'Option 1',
    'Option 2',
    'Cancel',
    'Delete',
  ];

  const cancelButtonIndex = options.indexOf('Cancel');
  const destructiveButtonIndex = options.indexOf('Delete');

  return (
    <View>
      <Button title="Show Action Sheet" onPress={() => actionSheetRef.current.show()} />
      <ActionSheet
        ref={actionSheetRef}
        options={options}
        cancelButtonIndex={cancelButtonIndex}
        destructiveButtonIndex={destructiveButton推荐使用官方文档中的最新方法。

const handlePress = (index) => {
  switch (index) {
    case 0:
      // Handle Option 1
      break;
    case 1:
      // Handle Option 2
      break;
    case 2:
      // Handle Cancel
      break;
    case 3:
      // Handle Delete
      break;
    default:
      break;
  }
};

// 在 ActionSheet 组件中添加 onPress 属性
<ActionSheet
  ref={actionSheetRef}
  options={options}
  cancelButtonIndex={cancelButtonIndex}
  destructiveButtonIndex={destructiveButtonIndex}
  onPress={handlePress}
/>