我已经为模态编写了上述可重用组件,但当我在模态外单击时,我想关闭模态,为此我使用了TouchableWithoutFeedback,但onPress我添加了props,我不想使用props。我想在此代码本身中添加逻辑,这样无论在何处使用此组件,我都不必调用该props。请让我知道如何才能实现这一点
<Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
<TouchableWithoutFeedback onPress={props.dismissModal}>
<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}>{bottomSheetStrings.addNew}</Text>
</View>
<View style={SheetStyles.iconContainer}>
<IMIcon
name={Icon.cancel}
size={18}
color={colors.grayish}
iconsStyle={Styles.closeButton}
/>
</View>
</View>
</View>
<View style={Styles.viewContainer}>
<SafeAreaView>
<FlatList
horizontal={false}
data={props.navData}
renderItem={renderActions}
keyExtractor={(item) => item.id}
numColumns={4}
/>
</SafeAreaView>
</View>
</View>
</Modal>
2条答案
按热度按时间4nkexdtk1#
只需将
Modal
的内容 Package 到TouchableWithoutFeedback
中,然后从那里设置可见性状态。下面是完整的示例:Expo Snack
lg40wkob2#
尝试使用https://github.com/react-native-modal/react-native-modal npm,它提供了比react原生内置模式更多的可访问性。
在这里我们可以简单地处理onBackdropPress事件来关闭模态。
例如: