React 模态元素不覆盖屏幕的左侧部分
React modal element doesn't cover the left part of the screen
我有一个我想要在整个屏幕上显示的 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);
};
这是我模拟器上的截图
您无需指定高度和宽度值即可覆盖屏幕。一个简单的 flex: 1
就可以了。
const styles = StyleSheet.create({
contract: {
backgroundColor: 'white',
flex: 1, // <---
}
});
为什么不使用 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
我需要将 modal
元素的 margin
设置为 0
<Modal style={{margin: 0}} isVisible={true}>
...
</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);
};
您无需指定高度和宽度值即可覆盖屏幕。一个简单的 flex: 1
就可以了。
const styles = StyleSheet.create({
contract: {
backgroundColor: 'white',
flex: 1, // <---
}
});
为什么不使用 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
我需要将 modal
元素的 margin
设置为 0
<Modal style={{margin: 0}} isVisible={true}>
...
</Modal>