javascript - React Native 模态样式

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>

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文档 here , 你不能使用 style对此的支持。

您可以将样式添加到您的 <Wrapper>元素并添加 Prop transparent给你的Modal获得透明背景(而不是默认的白色)。

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

您还必须使用 style支持你的<Wrapper>组件。