Javascript 反应本机模态样式

所以，我在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>

ShiftDeclineWrapper只是

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

---

我试着把50%的宽度/高度放进去，这样我就可以确保它能正常工作，这样我就可以按照我想要的方式来设计它，我试着把它放在模态、包装器上，也把它移到了declinewrapper上。从

模态

文档中没有任何效果，你不能使用

样式

道具

您可以将样式添加到

元素，并将prop

transparent

添加到

Modal

以获得透明背景（而不是默认的白色）

您还必须在您的

组件上使用

样式

道具。

这对我很有效

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

我的文字

不起作用，它只是使我的模式透明，只是更改了我的按钮和文本，模式仍然是全屏的，我不能让它透明，因为这样模式文本和按钮将位于其他文本/按钮之上。模式始终是全屏的（这是模式的目的）。为什么不创建一个正常的

，它具有

位置：绝对

？我建议使用react原生模式而不是标准模式

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

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