反应本机模态样式

Question

所以，我在 react native 中有一个模式，它占用了我的整个屏幕，我不希望这种情况发生，任何想法如何配置它？我有以下结构

<Modal visible={props.display} animationType="slide" style={{
    width: '50%',
    height: '50%'}}>
      <Wrapper>
          <ShiftDeclinedWrapper>
            <CenterText padding="20px">{props.data}</CenterText>
            <Footer>
              <ButtonWrapper>
                <Button
                  isDisabled={props.isLoading}
                  onPress={() => props.declineAccept()}
                  textColor="white"
                  color={theme.color.red}>
                  Decline
                </Button>
              </ButtonWrapper>
              <ButtonWrapper>
                <Button
                  isDisabled={props.isLoading}
                  onPress={props.declineBack}
                  textColor="white"
                  color={theme.color.green}>
                  No, thanks
                </Button>
              </ButtonWrapper>
            </Footer>
          </ShiftDeclinedWrapper>
      </Wrapper>
    </Modal>

包装器组件结构为

export const Wrapper = styled.View`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex: 1;
`;

ShiftDeclineWrapper 只是

export const ShiftDeclinedWrapper = styled.View`
  text-align: center;
`;

我试过放置 50% 的宽度/高度，这样我就可以确保它可以工作，这样我就可以按照我想要的方式设置它，我尝试把它放在模态、包装器上，也只是 shiftdeclinewrapper 也没有任何效果

Answer 1

从此处的Modal文档中，您不能为此使用 style 道具。

您可以将样式添加到<Wrapper>元素，并将道具transparent添加到Modal以获得透明背景（而不是默认的白色）。

<Modal visible={props.display} animationType="slide" transparent>
  <Wrapper style={{width: '50%', height: '50%'}}>

您还必须在<Wrapper>组件上使用style道具。

Answer 2

这对

我有用！

<Modal
        presentationStyle="overFullScreen"
        transparent
        visible={true}
    >
        <View style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <View style={{
                backgroundColor: "#fff",
                width: 300,
                height: 300,
           }}>
                <Text>MY TEXT </Text>
            </View>
        </View>
    </Modal>