प्रतिक्रियाशील मूल उत्तरदायी फ़ॉन्ट आकार

Question 1

मैं पूछना चाहता हूं कि देशी हैंडल को कैसे प्रतिक्रिया दें या उत्तरदायी फ़ॉन्ट करें। उदाहरण के लिए iphone 4s में मेरे पास fontSize: 14 है, जबकि iphone 6 में मेरे पास fontSize: 18 है।

Question 2

आप PixelRatio का उपयोग कर सकते हैं

उदाहरण के लिए:

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
  }
});

संपादित करें:

एक और उदाहरण:

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
  }
}

उपयोग:

fontSize: normalize(24)

आप <Text />पूर्व-निर्धारित आकार से प्रत्येक घटक पर आकारों का उपयोग करने की अनुमति देकर एक कदम आगे जा सकते हैं ।

उदाहरण:

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

Question 3

हम लिखे गए एक सरल, सीधे-आगे, स्केलिंग बर्तन कार्यों का उपयोग करते हैं:

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};

आपको बचाता है कुछ समय कई इफ्स करने का। आप इसके बारे में मेरे ब्लॉग पोस्ट पर अधिक पढ़ सकते हैं ।

संपादित करें: मैंने सोचा कि इन कार्यों को अपने स्वयं के npm पैकेज में निकालने में मदद मिल सकती है, मैंने पैकेज में भी शामिल ScaledSheetकिया है, जो कि स्वचालित रूप से छोटा संस्करण है StyleSheet। आप इसे यहां पा सकते हैं: प्रतिक्रिया-मूल-आकार-मामले ।

Question 4

क्योंकि उत्तरदायी इकाइयाँ इस समय प्रतिक्रिया-मूल में उपलब्ध नहीं हैं, मैं कहूंगा कि आपकी सबसे अच्छी शर्त स्क्रीन के आकार का पता लगाना और उसके बाद डिवाइस के प्रकार का पता लगाना और फ़ॉन्ट को सशर्त रूप से सेट करना होगा।

आप एक मॉड्यूल लिख सकते हैं जैसे:

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

आपको बस यह देखना होगा कि प्रत्येक डिवाइस के लिए डिफ़ॉल्ट चौड़ाई और ऊंचाई क्या है। यदि उपकरण के अभिविन्यास में परिवर्तन करने पर चौड़ाई और ऊँचाई फ़्लिप की जाती है, तो आप इसके बजाय पहलू अनुपात का उपयोग करने में सक्षम हो सकते हैं या चौड़ाई का पता लगाने के लिए दो आयामों का कम पता लगा सकते हैं।

यह मॉड्यूल या यह एक आपको डिवाइस आयाम या डिवाइस प्रकार खोजने में मदद कर सकता है।

Question 5

मेरे द्वारा लिखे गए पुस्तकालय पर एक नज़र डालें: https://github.com/tachyons-css/react-native-style-tachyons

यह आपको remशुरू में एक रूट-फॉन्टसाइज़ ( ) निर्दिष्ट करने की अनुमति देता है , जिसे आप अपनी PixelRatioया अन्य डिवाइस-विशेषताओं पर निर्भर कर सकते हैं ।

फिर आप अपने सापेक्ष शैली प्राप्त करते हैं rem, न केवल fontSize, बल्कि पैडिंग आदि भी।

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

Expanation:

f5हमेशा आपका आधार-फ़ॉन्ट है
pa2 आपके आधार-फ़ॉन्ट के सापेक्ष आपको पेडिंग देता है।

Question 6

मैं बस स्क्रीन के आकार के अनुपात का उपयोग करता हूं, जो मेरे लिए ठीक काम करता है।

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));

परीक्षा

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}

Question 7

मैंने निम्नलिखित कार्य करके इस पर काबू पाया।

आपके द्वारा वर्तमान दृश्य के लिए इच्छित फ़ॉन्ट आकार चुनें (सुनिश्चित करें कि यह आपके द्वारा उपयोग किए जा रहे वर्तमान उपकरण के लिए अच्छा लग रहा है)।
import { Dimensions } from 'react-native' और घटक के बाहर की चौड़ाई को इस तरह परिभाषित करें: let width = Dimensions.get('window').width;
अब कंसोल.लॉग (चौड़ाई) और इसे लिख लें। यदि आपके अच्छे दिखने वाले फ़ॉन्ट का आकार 15 है और उदाहरण के लिए आपकी चौड़ाई 360 है, तो 360 लें और 15 (= 24) से विभाजित करें। यह महत्वपूर्ण मूल्य है जो विभिन्न आकारों में समायोजित करने जा रहा है।

अपनी शैली ऑब्जेक्ट में इस नंबर का उपयोग करें जैसे: textFontSize: { fontSize = width / 24 },...

अब आपके पास एक उत्तरदायी फ़ॉन्ट है।

Question 8

adjustsFontSizeToFitऔर numberOfLinesमेरे लिए काम करता है। वे लंबे ईमेल को 1 पंक्ति में समायोजित करते हैं।

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

Question 9

हम फ्लेक्स लेआउट का उपयोग कर सकते हैं और उत्तरदायी फ़ॉन्ट आकारों के लिए एडजस्टमेंटसॉइटफ़िट = {सच} का उपयोग कर सकते हैं। और पाठ कंटेनर के आकार के अनुसार समायोजित करेगा।

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

लेकिन शैलियों में आपको एक फोंटसाइज़ लगाने की आवश्यकता होती है और उसके बाद ही कार्य को समायोजित किया जाएगा।

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

Question 10

मैं हाल ही में इस समस्या में भाग गया और प्रतिक्रिया-मूल-विस्तारित-स्टाइलशीट का उपयोग करके समाप्त हुआ

आप remस्क्रीन आकार के आधार पर आपको मूल्य और अतिरिक्त आकार की स्थिति निर्धारित कर सकते हैं । डॉक्स के अनुसार:

// 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
});

Question 11

क्यों नहीं उपयोग किया जाता है PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);, यह pdएंड्रॉइड में इकाइयों के समान है।

Question 12

import { Dimensions } from 'react-native';

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

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

fontScaleअपने डिवाइस के अनुसार पैमाने प्राप्त करें ।

Question 13

इस तरह का उपयोग करने की आवश्यकता है मैंने इसका उपयोग किया है और यह ठीक काम कर रहा है।

प्रतिक्रिया-देशी -उत्तरदायी-स्क्रीन npm प्रतिक्रिया-मूल-उत्तरदायी-स्क्रीन - save स्थापित करें

जैसे मेरे पास एक डिवाइस 1080x1920 है

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%")

यह सभी डिवाइस के लिए काम कर रहा है

Question 14

मेरे लिए थोड़ा अलग दृष्टिकोण काम करता है: -

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
};

पिक्सेल अनुपात का उल्लेख करें क्योंकि यह आपको डिवाइस घनत्व के आधार पर फ़ंक्शन को बेहतर तरीके से सेट करने की अनुमति देता है।

Question 15

आप कुछ इस तरह का उपयोग कर सकते हैं।

var {ऊँचाई, चौड़ाई} = आयाम.गेट ('विंडो'); var textFontSize = चौड़ाई * 0.03;

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

आशा है कि यह किसी भी तीसरे पक्ष के पुस्तकालयों को स्थापित किए बिना मदद करता है।