Question

我添加了上面的可重用代码来显示模态并在该模态外单击时关闭模态，当我单击按钮时会显示模态，当我在该模态外单击时它会关闭，直到这里它正在工作正确但是当我再次单击按钮打开模态时，模态没有显示，谁能告诉我我犯了什么错误。

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);

  return (
    showBottomSheet && (
    <Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
      <TouchableWithoutFeedback onPress={()=> setBottomSheet(false)}>
         <View style={Styles.Container}></View>
      </TouchableWithoutFeedback>
      <View style={Styles.container}>
        <View style={Styles.headerContainer}>
          <View style={[Styles.header, Styles.directionRow]}>
            <View>
              <Text style={Styles.headerText}>{Strings.addNew}</Text>
            </View>
            <View style={Styles.iconContainer}>
              <IMIcon
                name={cancel}
                size={18}
                iconsStyle={Styles.closeButton}
                IconClick={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>

Answer 1

你有双重状态。当您关闭它时，您将内部状态设置为 false，而永远不会将其设置为 true。

移除内部状态并改为调用 onClose，它会正常工作。

编辑：代码示例：

const BottomSheet: FunctionComponent<Props> = (props) => {

  if (!props.visible) return null;

  return (
    <Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
      <TouchableWithoutFeedback onPress={props.onClose}>
     ...

模态关闭后无法正常工作

1 个答案: