10

我正在尝试使用提供的钩子 useActionSheet() 在功能组件中使用https://github.com/expo/react-native-action-sheet 。我已经在使用类组件版本没有任何问题，但我想切换到功能。

反应版本是 16.9.0

这是我的组件

import {
  connectActionSheet,
  useActionSheet,
} from "@expo/react-native-action-sheet";
import React, { Component } from "react";
import { View, Text, SafeAreaView } from "react-native";
import TaButton from "../components/TaButton";
import { typography, styles, buttons } from "../components/Styles";

const UploadUI: React.FC<{
  description: string;
  label: string;
}> = (props) => {
  const { showActionSheetWithOptions } = useActionSheet();

  const openActionSheet = () => {
    console.log("TEST - Choosing action now");
    const options = [
      "Scegli dalla libreria",
      "Scatta una foto",
      "Carica un file",
      "Annulla",
    ];
    //const destructiveButtonIndex = 0;
    const cancelButtonIndex = options.length - 1;

    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        //destructiveButtonIndex,
      },
      (buttonIndex) => {
        // Do something here depending on the button index selected
        switch (buttonIndex) {
          case 0:
            console.log('Case 0')
            
            return;
          case 1:
            console.log("Case 1");
            return;
          case 2:
            console.log("Case 2");
            return;

          default:
        }
      }
    );
  };

  const { description, label } = props;
  return (
    <View style={{ flexDirection: "row", height: 50, marginBottom: 30 }}>
      <View style={{ flex: 0.7, justifyContent: "center" }}>
        <Text style={typography.body}>{description}</Text>
      </View>
      <View style={{ flex: 0.3 }}>
        <TaButton
          style={buttons.primary}
          labelStyle={buttons.primaryLabel}
          onPress={() => openActionSheet()}
          label={label}
        />
      </View>
    </View>
  );
};

const URWStep4: React.FC = (props) => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <View style={{ paddingVertical: 30, marginBottom: 20 }}>
          <Text style={typography.title}>
            Ci serviranno alcuni documenti per verificare la tua identità
          </Text>
        </View>
        <UploadUI
          description="Carta d'identità - Fronte"
          label="Carica"
        ></UploadUI>
        <UploadUI
          description="Carta d'identità - Retro"
          label="Carica"
        ></UploadUI>
      </View>
    </SafeAreaView>
  );
};

export default connectActionSheet(URWStep4);

单击按钮时，会记录“测试 - 立即选择操作”这句话，但没有任何反应。操作表未打开。

4

2 回答 2

1

<ActionSheetProvider />即使使用钩子，也要检查你是否已经包装了你的顶级组件

https://github.com/expo/react-native-action-sheet#1-wrap-your-top-level-component-with-actionsheetprovider-

于 2020-12-25T02:31:46.300 回答
0

使用 useRef，我在 lib 和Allanmaral 的回答中看到了这个问题：

 
import ActionSheet from 'react-native-actionsheet'

const Demo = (props) => {
  const refActionSheet = useRef(null);

  showActionSheet = () => {
    if (refActionSheet.current) {
      refActionSheet.current.show();
    }
  }
  
  return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={refActionSheet}
          title={'Which one do you like ?'}
          options={['Apple', 'Banana', 'cancel']}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
}

于 2022-02-26T04:36:27.683 回答