React Native 模态样式答案

【问题标题】：React Native Modal stylingReact Native 模态样式
【发布时间】：2019-01-10 13:53:47
【问题描述】：

所以，我在 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% 的宽度/高度设置为确保它可以正常工作，以便我可以按照自己的意愿设置样式，我尝试将它放在 modal、wrapper 和 shiftdeclinewrapper 上，也没有任何效果

【问题讨论】：

我推荐使用 react-native-modal 而不是标准的 Modal

标签： javascript reactjs react-native

【解决方案1】：

根据Modal 文档here，您不能为此使用style 属性。

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

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

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

【讨论】：

不起作用，它只是让我的模态透明，只是改变我的按钮和文本，模态仍然是全屏的，我不能让它透明，因为那样模态文本和按钮就会结束其他文字/按钮
模态总是全屏的（这就是模态的目的）。为什么不创建具有position: absolute 的普通<View>？

【解决方案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>

【讨论】：