反应本机模态样式

Question

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

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

Wrapper 组件结构是

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>