时间戳

首页 > 解决方案 > React modal 元素不覆盖屏幕的左侧

react-native - React modal 元素不覆盖屏幕的左侧

问题描述

我有一个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);
};

在此处输入图像描述 这是我模拟器上的截图

标签： react-nativereact-modal

解决方案

为什么不用css？为您的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)
  }
}

这是一个尚未完成但工作 的代码框

推荐阅读