React Native min/max widths nasıl yapılır

Question

Arabirimdeki bir bileşeni stil oluşturmak istiyorum. Bileşenin en az 200 genişliğe sahip olması gerekir, ancak ekran genişliği 600'e kadar büyümesine izin vermek istiyorum. Ancak, bazen insanlar tabletleri veya büyük telefonları kullanır. Ve bileşenin sonsuza kadar ekran ile büyümesini istemiyorum. En fazla 600 genişliğe sahip olmak istiyorum.

Ve biliyorum MaxWidth, şu anda en azından şimdilik, Yerele Tepki'deki flexbox uygulamasının bir parçası değil, bu yüzden makul bir yol var mı? bugün bunu yapmak için?

Answer 1

React Native'de "maxWidth" diye bir şey yoktur. Bileşeninizi çalışma zamanında biçimlendirmek isteyebilirsiniz. Dimensions ile oynamayı deneyin. Cihazın ekran genişliğini ve ekran yüksekliğini alabilir ve bileşeninizin genişliğini buna göre ayarlayabilirsiniz.

İki farklı stil nesnesini tanımlayabilirsiniz. sahip olan bir cihaz üzerinde tam genişlikli bileşeni için

genişliği daha az 600.

componentStyle_1: { 
    flex: 1 
} 

sahip olan bir aygıt üzerinde 600 genişliği için genişliği daha büyük 600

componentStyle_2: { 
    width: 600 
} 

kontrol edebilir cihaz genişliği çalışma zamanı.

var {height, width} = Dimensions.get('window');

if(width>600){ 
    //load componentStyle_1 
} 
else{ 
    //load componentStyle_2 
} 

doğru sonuçlar almanın en iyi yolu, kodunuzu oynamaktır. İyi şanslar!

bakın: https://facebook.github.io/react-native/docs/dimensions.html#content

Answer 2

Sen yardımcı sınıfı PixelRatio kullanabilirsiniz.

https://facebook.github.io/react-native/docs/pixelratio.html