Реагируйте на собственный стиль внутри ImageBackground

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 вид меняется ифоновое изображение имеет некоторый запас как сверху, так и слева, хотя я использовал Размеры, чтобы я мог получить высоту и ширину экрана, чтобы я мог соответственно настроить вид, но не сработал, что лучше всего сделать вэтот сценарий, поэтому представление будет одинаковым на всех устройствах.

Answer 1

Все, что вам нужно сделать, это не устанавливать высоту изображения, просто установить его ширину на ширину экрана, и он будет адаптироваться к экрану

Answer 2

эта библиотека может решить эту проблему. React Native Size Mater

имеет lib-код очень маленького размера, который не зависит ни от какой зависимости.

имеет 3 функции:

scale(size: number) Возвращает результат линейного масштабирования указанного размера на основе ширины экрана вашего устройства.

verticalScale(size: number) Возвращает масштаб линейногорезультат предоставленного размера, основанный на высоте экрана вашего устройства.

moderateScale(size: number, factor?: number)

Иногда вы не хотите масштабировать все линейно, вот где появляется умеренный масштаб.Самое интересное, что вы можете контролировать коэффициент изменения размера (по умолчанию 0,5).Если обычный масштаб увеличит ваш размер на + 2X, умеренный масштаб увеличит его только на + X, например:

удачи