EXPO:设置react-native-action-sheet

react-native-action-sheet 是一个用于在 React Native 应用中显示底部操作表（Action Sheet）的库

以下是如何在 Expo 项目中设置和使用 react-native-action-sheet 的步骤：

1. 安装依赖

首先，你需要安装 react-native-action-sheet 库。在项目根目录下运行以下命令：

npm install react-native-action-sheet

或者使用 Yarn：

yarn add react-native-action-sheet

2. 链接原生模块（对于非 Expo Go 项目）

如果你不是在使用 Expo Go，而是使用 Expo SDK 并且需要链接原生模块，你需要运行以下命令：

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

然后，在你的 ios 目录下的 Podfile 文件中添加以下内容：

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

之后，运行 npx pod-install ios 来安装原生依赖。

3. 在你的组件中使用 ActionSheet

在你的 React Native 组件中，你可以这样使用 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推荐使用官方文档中的最新方法。

4. 处理 ActionSheet 的回调

你可以通过 onPress 属性来处理 ActionSheet 中选项的点击事件：

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}
/>

现在，当你点击 "Show Action Sheet" 按钮时，ActionSheet 应该会显示出来，并且你可以根据用户的点击来处理不同的操作。