React native 反应模态元素不'；不要遮住屏幕的左侧

我想在整个屏幕上显示一个

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 native'导入{样式表，维度，像素比率}；
我想在整个屏幕上显示模态
{previousButton}{nextButton}
const styles=StyleSheet.create({
合同：{
背景颜色：“白色”，
宽度：宽度百分比TODP（'100%'），
高度：高度百分比TODP（'100%”）
}
});
常量宽度百分比TODP=widthPercent=>{
const screenWidth=Dimensions.get（'window'）.width；
const elemWidth=parseFloat（宽度百分比）；
返回PixelRatio.roundToNearestPixel（屏幕宽度*像素宽度/100）；
};
常量高度百分比TODP=高度百分比=>{
const screenHeight=维度.get（'window'）。高度；
常量元素高度=解析浮点（高度百分比）；
返回PixelRatio.roundToNearestPixel（屏幕高度*像素高/100）；
};

---

这是我的模拟器上的屏幕截图

你不需要给出高度和宽度值来覆盖屏幕。一个简单的

flex:1

就可以了

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

const styles=StyleSheet.create({
合同：{
背景颜色：“白色”，
flex:1，//为什么不使用css？
为您的模态组件提供模态css类，并将后者定义为：

.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)
  }
}

这是一个尚未完成但仍在工作的我需要将
模式
元素的
边距设置为0

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


...
使用
flex:1
我在顶部、底部和右侧都有一个间隙，除非您使用
SafeAreaView
，
flex:1
应该覆盖整个屏幕。我使用的是
SafeAreaView
，但是如果我删除它，它只会影响永久内容（当
模态
为
true
时隐藏的内容），而不是
模态
元素