如何在 React Native 的操作表中按单个选项？

Question

我对 React Native 还是个新手。我有一个包含两个选项和一个取消选项的操作表。我无法理解如何让每个选项在按下时执行不同的操作。

我的代码：

import React, { useRef } from "react"
import ActionSheet from 'react-native-actionsheet'
import { View, Text, Pressable } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';

const ActionSheet = () => {

  let actionSheet = useRef();
  let optionArray = ['Orange', 'Cherry', 'Cancel'];

  const showActionSheet = () => {
    actionSheet.current.show();
  }

  return (
    <View
      <Pressable onPress={showActionSheet}>
        <View>
          <Text>Choose Fruit</Text>
          <Icon name="angle-right" size={15}/>
        </View>
      </Pressable>
      <ActionSheet 
        ref={actionSheet}
        options={optionArray}
        cancelButtonIndex={2}
        onPress={{????}}
      />
    </View>
  );
};

我想做的是在按下某个选项时导航到另一个屏幕

非常感谢任何帮助。提前致谢！

Answer 1

onPress 函数提供了一个索引参数。因此考虑以下代码片段。

const onActionSelect = (index) => {

    if (index === 1) {
      // first action pressed
    } else if (index === 2) {
      // second action pressed
    }
    // and so on
}

<ActionSheet 
        ref={actionSheet}
        options={optionArray}
        cancelButtonIndex={2}
        onPress={onActionSelect}
/>

如何在 React Native 的操作表中按单个选项？

How can I press individual option in actionsheet in React Native?

reactjs

react-native

actionsheet