如何解决如何使用带有钩子的react-native-action-sheet
我正在尝试使用提供的钩子useActionSheet()在功能组件中使用https://github.com/expo/react-native-action-sheet。我已经在使用类组件版本,没有任何问题,但是我想切换到功能。
实际版本为16.9.0
这是我的组成部分
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);
单击按钮时,预计会记录“测试-现在选择操作”这句话,但没有其他反应。操作表无法打开。
解决方法
即使在使用钩子时,也要检查您是否使用 <ActionSheetProvider />
包裹了顶级组件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。