React 模态元素不覆盖屏幕的左侧部分

Question

我有一个我想要在整个屏幕上显示的 Modal 元素，为此我创建了函数 widthPercentageToDP 和 heightPercentageToDP 从设备获取宽度和高度，并且按照设置的百分比填充，高度被完全覆盖但是宽度左边有一个小间隙没有被覆盖。

import { StyleSheet, Dimensions, PixelRatio } from 'react-native';

                  <Modal isVisible={true}>
                        <View style={[s.contract]}                                 > 
                                <View >
                                    <Text>
                                        I want the modal on the whole screen
                                    </Text>
                                </View>
                                <View >
                                    {previousButton}{nextButton}
                                </View>
                        </View>
                    </Modal>

const styles = StyleSheet.create({
    contract: {
        backgroundColor: 'white',
        width: widthPercentageToDP('100%'),
        height: heightPercentageToDP('100%')
    }
});

const widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get('window').width;
  const elemWidth = parseFloat(widthPercent);
  return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};
const heightPercentageToDP = heightPercent => {
  const screenHeight = Dimensions.get('window').height;
  const elemHeight = parseFloat(heightPercent);
return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

这是我模拟器上的截图

Answer 1

您无需指定高度和宽度值即可覆盖屏幕。一个简单的 flex: 1 就可以了。

const styles = StyleSheet.create({
    contract: {
        backgroundColor: 'white',
        flex: 1, // <---
    }
});

Answer 2

为什么不使用 css？给你的 Modal 组件 modal css-class 并将后者定义为：

.modal {
  background:white;
  box-shadow:0 2px 8px rgba(0,0,0, 0.26)
  width:90%;
  position: fixed;
  top:20vh;
  left:5%;
}
media (min-width:768px) {
  .modal {
    width: 50rem;
    left:calc((100%-50rem) / 2)
  }
}

这是一个尚未完成但工作codesandbox

Answer 3

我需要将 modal 元素的 margin 设置为 0

         <Modal style={{margin: 0}} isVisible={true}>
                        ...
         </Modal>

React 模态元素不覆盖屏幕的左侧部分

React modal element doesn't cover the left part of the screen

react-native

react-modal