[英]How to use react-native-action-sheet with hooks
我正在嘗試使用提供的鈎子 useActionSheet() 在功能組件中使用https://github.com/expo/react-native-action-sheet 。 我已經在使用 class 組件版本,沒有任何問題,但我想切換到功能版本。
反應版本是 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);
當點擊按鈕時,“TEST - Choosing action now”這句話被記錄為預期的廣告,但沒有更多的反應。 操作表不會打開。
檢查您是否使用<ActionSheetProvider />
包裝了頂級組件,即使使用鈎子也是如此
使用 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> ) }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.