react-native - 在模态框外单击时关闭模态框

Question

我已经为模态编写了上述可重用组件，但是当我在模态外部单击时我想关闭模态，因为我使用了 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>

标签： react-native