ตอบสนองขนาดตัวอักษรที่ตอบสนองตามปกติ

ฉันต้องการถามว่าตอบสนองอย่างไรที่จับแบบเนทีฟหรือทำฟอนต์ที่ตอบสนอง ตัวอย่างเช่นใน iphone 4s ฉันมี fontSize: 14 ในขณะที่ใน iphone 6 ฉันมี fontSize: 18

คุณสามารถใช้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),
  },
};

เราใช้ฟังก์ชันเครื่องมือปรับขนาดที่เรียบง่ายตรงไปตรงมาที่เราเขียน:

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

ช่วยให้คุณประหยัดเวลาในการทำหลาย ๆ ifs คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้เมื่อวันที่โพสต์บล็อกของฉัน

เนื่องจากหน่วยที่ตอบสนองไม่สามารถใช้งานได้ใน react-native ในขณะนี้ฉันจะบอกว่าทางออกที่ดีที่สุดของคุณคือการตรวจจับขนาดหน้าจอจากนั้นใช้สิ่งนั้นเพื่ออนุมานประเภทอุปกรณ์และตั้งค่า fontSize ตามเงื่อนไข

คุณสามารถเขียนโมดูลเช่น:

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

คุณเพียงแค่ต้องค้นหาความกว้างและความสูงเริ่มต้นสำหรับอุปกรณ์แต่ละเครื่อง หากความกว้างและความสูงพลิกเมื่ออุปกรณ์เปลี่ยนการวางแนวคุณอาจสามารถใช้อัตราส่วนภาพแทนหรือเพียงแค่หาขนาดที่น้อยกว่าของสองมิติเพื่อหาความกว้าง

นี้โมดูลหรือคนนี้สามารถช่วยคุณหาขนาดของอุปกรณ์หรือประเภทอุปกรณ์

ดูห้องสมุดที่ฉันเขียน: https://github.com/tachyons-css/react-native-style-tachyons

ช่วยให้คุณสามารถระบุ root-fontSize ( rem) เมื่อเริ่มต้นซึ่งคุณสามารถขึ้นอยู่กับไฟล์PixelRatioหรืออื่น ๆ

จากนั้นคุณจะได้รูปแบบที่สัมพันธ์กับremfontSize ของคุณไม่เพียง แต่ paddings ฯลฯ ด้วย:

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

การขยาย:

• f5เป็นแบบอักษรพื้นฐานของคุณเสมอ
• pa2 ช่วยให้คุณมีช่องว่างภายในที่สัมพันธ์กับขนาดฟอนต์พื้นฐานของคุณ

ฉันแค่ใช้อัตราส่วนของขนาดหน้าจอซึ่งใช้ได้ดีสำหรับฉัน

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}

ฉันสามารถเอาชนะสิ่งนี้ได้โดยทำสิ่งต่อไปนี้

1. เลือกขนาดตัวอักษรที่คุณต้องการสำหรับมุมมองปัจจุบันที่คุณมี (ตรวจสอบให้แน่ใจว่ามันดูดีสำหรับอุปกรณ์ปัจจุบันที่คุณใช้ในเครื่องจำลอง)

2. import { Dimensions } from 'react-native' และกำหนดความกว้างภายนอกส่วนประกอบดังนี้: let width = Dimensions.get('window').width;

3. ตอนนี้ console.log (width) แล้วจดไว้ หากขนาดแบบอักษรที่ดูดีของคุณคือ 15 และความกว้างของคุณคือ 360 เช่นให้นำ 360 แล้วหารด้วย 15 (= 24) นี่จะเป็นค่าสำคัญที่จะปรับเป็นขนาดต่างๆ

   ใช้หมายเลขนี้ในวัตถุสไตล์ของคุณดังนี้: textFontSize: { fontSize = width / 24 },...

ตอนนี้คุณมี FontSize ที่ตอบสนองแล้ว

adjustsFontSizeToFitและnumberOfLinesทำงานให้ฉัน พวกเขาปรับอีเมลยาวเป็น 1 บรรทัด

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

เราสามารถใช้เค้าโครงแบบยืดหยุ่นและใช้ adjustsFontSizeToFit = {true} สำหรับขนาดตัวอักษรที่ตอบสนองและข้อความจะปรับตามขนาดของคอนเทนเนอร์

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

แต่ในรูปแบบคุณต้องใส่ขนาดฟอนต์ด้วยเท่านั้นจึงจะปรับการทำงานของ FontSizeToFit ได้

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

เมื่อเร็ว ๆ นี้ฉันพบปัญหานี้และลงเอยด้วยการใช้react-native-expand-stylesheet

คุณสามารถตั้งค่าคุณ 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
});

ทำไมไม่ใช้PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);มันเหมือนกับpdหน่วยใน Android

import { Dimensions } from 'react-native';

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

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

fontScaleได้รับขนาดเป็นต่ออุปกรณ์ของคุณ

ต้องใช้วิธีนี้ฉันเคยใช้อันนี้แล้วมันก็ใช้ได้ดี

react-native-responsive-screen npm ติดตั้ง react-native-responsive-screen - บันทึก

เหมือนกับฉันมีอุปกรณ์ 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%")

มันใช้ได้กับทุกอุปกรณ์

วิธีการที่แตกต่างกันเล็กน้อยได้ผลสำหรับฉัน: -

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

โปรดดูอัตราส่วนพิกเซลเนื่องจากจะช่วยให้คุณตั้งค่าฟังก์ชันได้ดีขึ้นตามความหนาแน่นของอุปกรณ์

คุณสามารถใช้สิ่งนี้ได้

var {height, width} = Dimensions.get ('window'); var textFontSize = ความกว้าง * 0.03;

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

หวังว่านี่จะช่วยได้โดยไม่ต้องติดตั้งไลบรารีของบุคคลที่สาม