Question

我正在构建一个制作邀请卡的应用，我使用ImageBackground制作了邀请卡，然后对其中的内容进行了样式设置，但是我遇到了屏幕尺寸和分辨率不同的问题，我的代码如下：

<ImageBackground
          resizeMode='contain'
          backgroundColor={this.state.bgColor}
          style={{
               height: height / 3 + 20,
               width: width,}}
               source={this.state.border}>

       <View style={{ flex: 1, marginRight: 10,
                      marginLeft: 45, marginTop: 10 }}>

             <Text style={{ fontSize: height / 37, 
                            color: this.state.fontColor, 
                            fontWeight: '700',
                            textAlign: 'center', 
                            fontFamily: this.fonttext }}>{this.type}</Text>

              <Text style={{ marginLeft: 40,
                            marginRight: 5, marginTop: 10, 
                            fontSize: height / 48, 
                            color: this.state.fontColor, 
                            textAlign: 'right', 
                            fontFamily: this.fonttext }}>{this.body}</Text>

             <Text style={{ fontSize: height / 49, 
                            marginTop: 10, 
                            color: this.state.fontColor, 
                            textAlign: 'right', 
                            fontFamily: this.fonttext }}>{this.location}</Text>


             <View style={{ alignItems: 'center', 
                            justifyContent: 'center', 
                            marginTop: (height / 3 + 10) / 11 }}>

                  <Text style={{ fontSize: height / 49, 
                                 fontWeight: 'bold', 
                                 color: this.state.fontColor, 
                                 textAlign: 'right', 
                                 fontFamily: this.fonttext }}>From</Text>

                  <Text style={{ fontSize: height / 49, 
                                 color: this.state.fontColor, 
                                 textAlign: 'right', 
                                 fontFamily: this.fonttext }}>{this.fromD}</Text>
                            </View>

             <Text style={{ fontSize: height / 55, 
                            color: this.state.fontColor, 
                            textAlign: 'right', 
                            fontFamily: this.fonttext }}>{'*' + this.notes}</Text>
           </View>



                    </ImageBackground>

在Iphone 6上正常工作

但是在Iphone x，8 plus和android设备上，尽管我使用过Dimensions，但视图的变化和背景图像的上下左右都有一定的余量，因此我可以获取屏幕的高度和宽度，因此我可以相应地设置视图，但无法正常工作，因此在这种情况下最好的做法是，使所有设备上的视图都相同。

Answer 1

此库可以解决该问题，请检查React Native Size Mater

它具有很小的lib代码，仅对等依赖项没有任何依赖项。

它具有3个功能

scale(size: number) 将根据您设备的屏幕宽度返回所提供尺寸的线性缩放结果。

verticalScale(size: number) 将根据设备的屏幕高度返回所提供尺寸的线性比例结果。

moderateScale(size: number, factor?: number)

有时候，您不想以线性方式缩放所有内容，这就是适度缩放的地方。很棒的事情是您可以控制调整大小因子（默认为0.5）。如果正常缩放将使您的尺寸增加+2倍，则“中等缩放”将仅使尺寸增加+ X，例如：

祝你好运

Answer 2

您所要做的就是不设置图像高度，只需将其宽度设置为屏幕宽度即可适应屏幕

在ImageBackground内部反应本机样式

2 个答案: