我已经为模态编写了上述可重用组件,但是当我在模态之外单击时,我想关闭模态,为此我使用了 TouchableWithoutFeedback 但 onPress 我添加了道具,我不想使用我想要的道具在此代码本身中添加逻辑,以便我不必在我将使用此组件的任何地方调用该道具。请让我知道如何实现这一目标
import React, { FunctionComponent, useState } from 'react';
import { Modal, FlatList,TouchableWithoutFeedback } from 'react-native';
interface Props {
visible: boolean;
onClose: () => void;
}
const BottomSheet: FunctionComponent<Props> = (props) => {
const [showBottomSheet,setBottomSheet]=useState(true);
if (!showBottomSheet)
return null
return (
<Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
<TouchableWithoutFeedback onPress={() => setBottomSheet(false)}>
<View style={Styles.opacityContainer}></View>
</TouchableWithoutFeedback>
<View style={Styles.container}>
<View style={Styles.headerContainer}>
<View style={[Styles.header, Styles.directionRow]}>
<View>
<Text style={Styles.headerText}>Add</Text>
</View>
<View style={Styles.iconContainer}>
<Icon
name={cancel}
size={18}
onPress={props.onClose}
/>
</View>
</View>
</View>
<View style={Styles.viewContainer}>
<SafeAreaView>
<FlatList
horizontal={false}
data={props.navData}
renderItem={renderActions}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
</View>
</View>
</Modal>
);
};
这是我使用上述可重用组件的另一个文件
const [showBottomSheet, setShowBottomSheet] = useState(false);
const hideBottomSheet = () => {
setShowBottomSheet(false);
};
<View style={Styles.profileContainer}>
<AddNewButton
onButtonPress={() => {
setShowBottomSheet(true);
}}
buttonStyle={Styles.plusButton}
iconObject={{
iconName: plus,
iconSize: Sizes.plusLargeSize,
iconStyle: Styles.Icon,
}}
/>
<BottomSheet
visible={showBottomSheet}
onClose={hideBottomSheet}
/>
</View>