নেটিভ রেসপন্সিয়াল ফন্টের আকারের প্রতিক্রিয়া জানান

Question 1

নেটিভ হ্যান্ডেল কীভাবে প্রতিক্রিয়া জানায় বা প্রতিক্রিয়াশীল ফন্টটি করে তা আমি জানতে চাই। উদাহরণস্বরূপ আইফোন 4 এস-এ আমার ফন্টসাইজ রয়েছে: 14, আইফোন 6-এ আমার ফন্টসাইজ রয়েছে: 18।

Question 2

আপনি পিক্সেলরেটিও ব্যবহার করতে পারেন

উদাহরণ স্বরূপ:

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

অনেকগুলি আইএফ করার সময় আপনাকে কিছুটা সময় সাশ্রয় দেয়। আপনি আমার ব্লগ পোস্টে এটি সম্পর্কে আরও পড়তে পারেন ।

সম্পাদনা: আমি ভেবেছিলাম যে এই ফাংশনগুলি তাদের নিজস্ব এনপিএম প্যাকেজে নিষ্কাশন করা সহায়ক হতে পারে, আমি প্যাকেজটিতেও অন্তর্ভুক্ত করেছি 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কেবলমাত্র ফন্টসাইজই নয়, প্যাডিংস ইত্যাদির সাথেও সম্পর্কিত স্টাইলগুলি পাবেন:

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

সম্প্রসারণ:

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

adjustsFontSizeToFitএবং numberOfLinesআমার জন্য কাজ করে। তারা দীর্ঘ ইমেলটিকে 1 লাইনে সামঞ্জস্য করে।

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

Question 8

আমি নিম্নলিখিতটি করে এটি কাটিয়ে উঠতে সক্ষম হয়েছি।

আপনার কাছে থাকা বর্তমান দর্শনের জন্য আপনার পছন্দমতো ফন্টের আকারটি চয়ন করুন (সিমুলেটারে আপনি যে বর্তমান ডিভাইসটি ব্যবহার করছেন এটি এটি দেখতে ভাল লাগছে তা নিশ্চিত করুন)।
import { Dimensions } from 'react-native' এবং উপাদানগুলির বাইরের প্রস্থটি এর মতো সংজ্ঞায়িত করুন: let width = Dimensions.get('window').width;
এখন কনসোল.লগ (প্রস্থ) এবং এটি লিখুন। যদি আপনার সুদর্শন ফন্টের আকার 15 এবং আপনার প্রস্থ উদাহরণস্বরূপ 360 হয়, তবে 360 নিন এবং 15 (= 24) দ্বারা ভাগ করুন। এটি গুরুত্বপূর্ণ আকার হতে চলেছে যা বিভিন্ন আকারের সাথে সামঞ্জস্য করতে চলেছে।

আপনার স্টাইল অবজেক্টে এই সংখ্যাটি ব্যবহার করুন: textFontSize: { fontSize = width / 24 },...

এখন আপনার কাছে একটি প্রতিক্রিয়াশীল ফন্টসাইজ রয়েছে।

Question 9

আমরা ফ্লেক্স লেআউটটি ব্যবহার করতে পারি এবং প্রতিক্রিয়াশীল ফন্টের আকারের জন্য অ্যাডজাস্টস ফন্টসাইজেটফিট = {সত্য। ব্যবহার করতে পারি nd

     <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

এইটি ব্যবহার করার দরকার আমি এটি ব্যবহার করেছি এবং এটি ঠিকঠাক কাজ করছে।

রিএ্যাক্ট -নেটিভ-রেসপন্সিক-স্ক্রিন এনপিএম ইনস্টল করুন রিএ্যাক্ট-নেটিভ-রেসপন্সিক-স্ক্রিন - সেভ করুন

ঠিক যেমন আমার একটি ডিভাইস রয়েছে 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
};

পিক্সেল অনুপাতটি উল্লেখ করুন কারণ এটি আপনাকে ডিভাইসের ঘনত্বের ভিত্তিতে ফাংশনটি আরও ভালভাবে সেট আপ করতে দেয় allows

Question 15

আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন।

var {উচ্চতা, প্রস্থ} = মাত্রা.বিজ্ঞান ('উইন্ডো'); var textFontSize = প্রস্থ * 0.03;

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

আশা করি এটি কোনও তৃতীয় পক্ষের লাইব্রেরি ইনস্টল না করে সহায়তা করে।