2

我正在构建一个制作邀请卡的应用程序，我正在使用 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 设备上，视图会发生变化，并且背景图像从上方和左侧都有一些边距，尽管我使用了尺寸，所以我可以获得屏幕的高度和宽度，所以我可以设置相应地查看但没有工作，所以在这种情况下最好的做法是什么，以便所有设备上的视图都相同。

在此处输入图像描述

4

2 回答 2

0

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

于 2018-12-24T22:18:28.410 回答
0

这个库可以解决这个问题，看看React Native Size Mater

它有一个非常小的库代码，没有任何依赖，只是对等依赖。

它有3个功能

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

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

moderateScale(size: number, factor?: number)

有时您不想以线性方式缩放所有内容，这就是适度缩放的用武之地。关于它的酷之处在于您可以控制调整大小因子（默认值为 0.5）。如果正常比例会使您的尺寸增加+2X，moderateScale 只会增加+X，例如：

祝你好运

于 2018-12-24T21:39:51.487 回答