Yerel Duyarlı Yazı Tipi Boyutuna Tepki Ver

Yerel tutamacın nasıl tepki verdiğini veya duyarlı yazı tipini nasıl yaptığını sormak istiyorum. Örneğin iphone 4s'de fontSize: 14'üm var, iphone 6'da ise fontSize: 18 var.

PixelRatio'yu kullanabilirsiniz

Örneğin:

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

Düzenle:

Başka bir örnek:

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function normalize(size) {
  const newSize = size * scale 
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

Kullanım:

fontSize: normalize(24)

Boyutların her <Text />bileşende önceden tanımlanmış boyutlara göre kullanılmasına izin vererek bir adım daha ileri gidebilirsiniz .

Misal:

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
};

Yazdığımız basit, anlaşılır, ölçekleme araçları işlevlerini kullanıyoruz:

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;

export {scale, verticalScale, moderateScale};

Birçok ifs yapmak için size zaman kazandırır. Blog yazımda daha fazlasını okuyabilirsiniz .

Duyarlı birimler şu anda react-native olarak mevcut olmadığından, en iyi seçeneğinizin ekran boyutunu tespit etmek ve ardından bunu cihaz türünü anlamak ve fontSize koşuluna göre ayarlamak için kullanmak olduğunu söyleyebilirim.

Şöyle bir modül yazabilirsiniz:

function fontSizer (screenWidth) {
  if(screenWidth > 400){
    return 18;
  }else if(screenWidth > 250){
    return 14;
  }else { 
    return 12;
  }
}

Her cihaz için varsayılan genişlik ve yüksekliğin ne olduğuna bakmanız yeterlidir. Cihaz yönünü değiştirdiğinde genişlik ve yükseklik çevrilirse, bunun yerine en boy oranını kullanabilir veya genişliği bulmak için iki boyuttan daha küçük olanı anlayabilirsiniz.

Bu modül veya bu , cihaz boyutlarını veya cihaz türünü bulmanıza yardımcı olabilir.

Yazdığım kütüphaneye bir göz atın: https://github.com/tachyons-css/react-native-style-tachyons

remBaşlangıçta, sizin PixelRatioveya diğer aygıt özelliklerinden bağımsız hale getirebileceğiniz bir kök fontSize ( ) belirlemenize olanak tanır .

Ardından rem, yalnızca fontSize değil, dolgu vb. Öğelerinize göre stiller alırsınız :

<Text style={[s.f5, s.pa2, s.tc]}>
     Something
</Text>

Genişletme:

• f5her zaman temel yazı tipi boyutunuzdur
• pa2 temel yazı tipi boyutunuza göre dolgu sağlar.

Ben sadece benim için iyi çalışan ekran boyutunun oranını kullanıyorum.

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

// Use iPhone6 as base size which is 375 x 667
const baseWidth = 375;
const baseHeight = 667;

const scaleWidth = width / baseWidth;
const scaleHeight = height / baseHeight;
const scale = Math.min(scaleWidth, scaleHeight);

export const scaledSize =
    (size) => Math.ceil((size * scale));

Ölçek

const size = {
    small: scaledSize(25),
    oneThird: scaledSize(125),
    fullScreen: scaledSize(375),
};

console.log(size);

// iPhone 5s
{small: 22, oneThird: 107, fullScreen: 320}
// iPhone 6s
{small: 25, oneThird: 125, fullScreen: 375}
// iPhone 6s Plus
{small: 28, oneThird: 138, fullScreen: 414}

adjustsFontSizeToFitve numberOfLinesbenim için çalışıyor. Uzun e-postayı 1 satıra ayarlarlar.

<View>
  <Text
    numberOfLines={1}
    adjustsFontSizeToFit
    style={{textAlign:'center',fontSize:30}}
  >
    {this.props.email}
  </Text>
</View>

Aşağıdakileri yaparak bunun üstesinden gelmeyi başardım.

1. Sahip olduğunuz mevcut görünüm için beğendiğiniz yazı tipi boyutunu seçin (Simülatörde kullandığınız mevcut cihaz için iyi göründüğünden emin olun).

2. import { Dimensions } from 'react-native' ve bileşenin dışındaki genişliği şu şekilde tanımlayın: let width = Dimensions.get('window').width;

3. Şimdi console.log (genişlik) ve not edin. İyi görünen yazı tipi boyutunuz 15 ve genişliğiniz örneğin 360 ise, 360 alın ve 15'e bölün (= 24). Bu, farklı boyutlara uyum sağlayacak önemli değer olacak.

   Bu numarayı stiller nesnenizde şu şekilde kullanın: textFontSize: { fontSize = width / 24 },...

Artık duyarlı bir fontSize var.

Esnek düzen kullanabiliriz ve duyarlı yazı tipi boyutları için AdjustsFontSizeToFit = {true} kullanabiliriz. Metin, kabın boyutuna göre ayarlanır.

     <Text
    adjustsFontSizeToFit
    style={styles.valueField}>{value}
    </Text>

Ancak stillerde bir yazı tipi boyutu da koymanız gerekir, ancak bu durumda FontSizeToFit çalışmasını ayarlar.

    valueField: {
    flex: 3,
    fontSize: 48,
    marginBottom: 5,
    color: '#00A398',
},

Kısa süre önce bu sorunla karşılaştım ve react-native-extended-stil sayfasını kullanmaya başladım

remEkran boyutuna göre size değer ve ek boyut koşulları ayarlayabilirsiniz . Dokümanlara göre:

// component
const styles = EStyleSheet.create({
  text: {
    fontSize: '1.5rem',
    marginHorizontal: '2rem'
  }
});
// app entry
let {height, width} = Dimensions.get('window');
EStyleSheet.build({
  $rem: width > 340 ? 18 : 16
});

Neden kullanmıyorsunuz PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, pdAndroid'deki birimlerle aynı .

import { Dimensions } from 'react-native';

const { width, fontScale } = Dimensions.get("window");

const styles = StyleSheet.create({
    fontSize: idleFontSize / fontScale,
});

fontScalecihazınıza göre ölçek alın .

Bu şekilde kullanmam gerekiyor, bunu kullandım ve iyi çalışıyor.

react-native-responsive-screen npm install react-native-responsive-screen --save

Aynı 1080x1920 cihazım olduğu gibi

The vertical number we calculate from height **hp**
height:200
200/1920*100 = 10.41% - height:hp("10.41%")


The Horizontal number we calculate from width **wp**
width:200
200/1080*100 = 18.51% - Width:wp("18.51%")

Tüm cihazlar için çalışıyor

Benim için biraz farklı bir yaklaşım işe yaradı: -

const normalize = (size: number): number => {
  const scale = screenWidth / 320;
  const newSize = size * scale;
  let calculatedSize = Math.round(PixelRatio.roundToNearestPixel(newSize))

  if (PixelRatio.get() < 3)
    return calculatedSize - 0.5
  return calculatedSize
};

Piksel Oranına bakınCihaz yoğunluğuna göre işlevi daha iyi ayarlamanıza izin verdiği için .

Bunun gibi bir şey kullanabilirsiniz.

var {yükseklik, genişlik} = Boyutlar.get ('pencere'); var textFontSize = genişlik * 0,03;

inputText: {
    color : TEXT_COLOR_PRIMARY,
    width: '80%',
    fontSize: textFontSize
}

Umarım bu, herhangi bir üçüncü taraf kitaplığı yüklemeden yardımcı olur.