如何使用带有钩子的 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】:检查您是否使用 <ActionSheetProvider />
包装了您的***组件,即使使用钩子也是如此
https://github.com/expo/react-native-action-sheet#1-wrap-your-top-level-component-with-actionsheetprovider-
【讨论】:
以上是关于如何使用带有钩子的 react-native-action-sheet的主要内容,如果未能解决你的问题,请参考以下文章
如何在带有 vuex 的 vue 生命周期钩子中使用 async/await?