我正在尝试按照文档进行操作，但是当我按下我用 Pressable 包围的内容时，我的模式没有出现

Question

我打算使用 Touchable opacity 作为包装器，但文档指示我使用 pressable，我可以看到组件被按下，但模态没有显示。它与我的 CSS 有关系还是我弄乱了模态实现。此外，我正在尝试在模态中添加选项，然后用于更改原始页面的状态以显示项目。有没有人有关于如何在页面之间传递信息的文档供我阅读？

这是我的代码：

import {LeftTextRightIcon} from '@atoms/LeftTextRightIcon';
import {Text, TextTypes} from '@atoms/Text';
import styled from '@styled-components';
import * as React from 'react';
import {useState} from 'react';
import {Modal, Pressable} from 'react-native';

export interface ISortFilterCategory {
  title: string;
}

export const SortFilterCategory: React.FC<ISortFilterCategory> = ({
  title,
  ...props
}) => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <Container {...props}>
      <TopContainer>
        <TitleContainer>
          <TitleText>{title}</TitleText>
        </TitleContainer>
        <ButtonContainers>
          <FirstModal
            visible={modalVisible}
            onRequestClose={() => {
              setModalVisible(!modalVisible);
            }}>
            <ModalContent>
              <TitleContainer>
                <TitleText>{title}</TitleText>
              </TitleContainer>
            </ModalContent>
          </FirstModal>
          <Pressable onPress={() => setModalVisible(true)}>
            <LeftTextRightIcon text="Sort" icon="chevron-down" />
          </Pressable>
          <LeftTextRightIcon text="Filter" icon="chevron-down" />
          <LeftTextRightIcon text="Category" icon="chevron-down" />
        </ButtonContainers>
      </TopContainer>
      <BottomContainer />
    </Container>
  );
};
const Container = styled.View`
  flex-direction: column;
  background-color: white;
  padding: 10px;
`;

const TopContainer = styled.View`
  flex-direction: column;
`;

const FirstModal = styled(Modal).attrs(() => ({
  animationType: 'slide',
  transparent: true,
}))``;

const ModalContent = styled.View`
  flex-direction: row;
  background-color: pink;
`;

const BottomContainer = styled.View`
  flex-direction: column;
`;

const ButtonContainers = styled.View`
  flex-direction: row;
  justify-content: flex-end;
`;

const TitleContainer = styled.View`
  flex-direction: row;
  justify-content: center;
`;
const TitleText = styled(Text).attrs(() => ({
  type: TextTypes.H2,
}))`
  color: ${({theme}) => theme.colors.primary};
`;

为了它的价值，我正在尝试制作这样的东西，但我不想继续添加多个库，而是想自己制作。 https://github.com/osdnk/react-native-reanimated-bottom-sheet

Answer 1

输入答案而不是评论，因为它太长了。你能试试这个吗：

        ...
        {modalVisible &&
          (<FirstModal
            visible={modalVisible}
            onRequestClose={() => {
              setModalVisible(false);
            }}>
            <ModalContent>
              <TitleContainer>
                <TitleText>{title}</TitleText>
              </TitleContainer>
            </ModalContent>
          </FirstModal>)
        }
        ...

您也可以尝试使用样式，看看在没有样式的情况下效果如何

Answer 2

我解决了我的问题。发生的事情是点击正在注册，但没有任何内容可以通过。我通过转到 LeftTextRightIcon 文本并使周围的 div 成为 TouchableOpacity 而不是 View 来解决此问题。此更改允许传递函数。我不确定这是否正是它的工作方式，但这就是我能够让它工作的方式。

<Container {...props}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>
        <CenterView>
          <ModalContent>
            <ModalTitle>
              <TitleText>{title}</TitleText>
            </ModalTitle>
            <ModalBody>
              <LeftTextRightCheckBox>
                <TitleText>Newest</TitleText>
                <CheckBox />
              </LeftTextRightCheckBox>
              <LeftTextRightCheckBox>
                <TitleText>Points High to Low</TitleText>
                <CheckBox />
              </LeftTextRightCheckBox>
              <LeftTextRightCheckBox>
                <TitleText>Brands A to Z</TitleText>
                <CheckBox />
              </LeftTextRightCheckBox>
            </ModalBody>
            <Pressable onPress={() => setModalVisible(!modalVisible)}>
              <TitleContainer>
                <TitleText>Close</TitleText>
              </TitleContainer>
            </Pressable>
          </ModalContent>
        </CenterView>
      </Modal>
      <TopContainer>
        <TitleContainer>
          <TitleText>{title}</TitleText>
        </TitleContainer>
        <ButtonContainers>
          <LeftTextRightIcon
            onPress={() => setModalVisible(true)}
            text="Sort"
            icon="chevron-down"
          />
          <LeftTextRightIcon text="Filter" icon="chevron-down" />
          <LeftTextRightIcon text="Category" icon="chevron-down" />
        </ButtonContainers>
      </TopContainer>
      <BottomContainer />
    </Container>

LeftTextRightIcon:

export interface ILeftTextRightIcon {
  icon: string;
  text: string;
  onPress?: any;
}

export const LeftTextRightIcon: React.FC<ILeftTextRightIcon> = ({
  icon = 'chevron-down',
  text,
  onPress,
  ...props
}) => (
  <LeftTextRightIconContainer onPress={onPress} {...props}>
    <DescriptionTextContainer>
      <DescriptionText> {text} </DescriptionText>
    </DescriptionTextContainer>
    <IconContainer>
      <Icon name={icon} type={vectorIconTypes.MEDIUM} />
    </IconContainer>
  </LeftTextRightIconContainer>
);

const LeftTextRightIconContainer = styled.TouchableOpacity`
  flex-direction: row;
  justify-content: center;
  background-color: ${({theme}) => theme.colors.background};
  border-radius: 999px;
  padding -left: 5px;
  margin: auto;
`;

我正在尝试按照文档进行操作，但是当我按下我用 Pressable 包围的内容时，我的模式没有出现

I am trying to follow the documentation, but my modal is not showing up when I press what I have surrounded with Pressable

javascript

css

modal-dialog

react-native