如何使用带有钩子的 react-native-action-sheet

Posted

技术标签:

【中文标题】如何使用带有钩子的 react-native-action-sheet【英文标题】:How to use react-native-action-sheet with hooks 【发布时间】:2020-12-01 04:55:11 【问题描述】:

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

React 版本是 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);

当点击按钮时,“测试 - 立即选择操作”这句话被记录在广告中,但没有任何反应。操作表未打开。

【问题讨论】:

您找到解决方案了吗?也在找那个。 你能发布完整的解决方案吗 【参考方案1】:

检查您是否使用 &lt;ActionSheetProvider /&gt; 包装了您的***组件,即使使用钩子也是如此

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

【讨论】:

以上是关于如何使用带有钩子的 react-native-action-sheet的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React 中使用带有钩子的生命周期方法?

如何滚动到带有钩子/函数的元素?

如何在带有 vuex 的 vue 生命周期钩子中使用 async/await?

如何使用带有钩子的 react-native-action-sheet

如何重用带有钩子的 React 库

如何正确使用带有 react-redux 的 useSelector 钩子的 curried 选择器函数?