reactjs - 如何在 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}
/>