react native text size

ตอบสนองขนาดข้อความดั้งเดิม

วัดข้อความได้อย่างแม่นยำก่อนที่จะวางมันและรับข้อมูลแบบอักษรจากแอปของคุณ (Android และ iOS)

ในประเทศของฉัน (เม็กซิโก) นักพัฒนาซอฟต์แวร์ได้รับค่าจ้างไม่ดีดังนั้นฉันต้องมองหางานอื่นเพื่อหาเลี้ยงชีพและฉันไม่สามารถทุ่มเทเวลามากขึ้นในการสร้างสิ่งนี้และที่เก็บอื่น ๆ ที่หลายปีที่ผ่านมา หากใครมีความสนใจในการบำรุงรักษาพื้นที่เก็บข้อมูลนี้ฉันยินดีที่จะโอนไปยังพวกเขาพร้อมกับแพ็คเกจ NPM ที่เกี่ยวข้อง
ในประเทศของฉัน (เม็กซิโก) นักพัฒนาซอฟต์แวร์กลัวดังนั้นฉันต้องมองหางานอื่นเพื่อหาเลี้ยงชีพและฉันไม่สามารถใช้เวลามากขึ้นในการรักษาสิ่งนี้และที่เก็บอื่น ๆ ได้มากกว่าปีที่ไม่เคยสร้างรายได้ หากมีคนสนใจที่จะรักษาพื้นที่เก็บข้อมูลนี้ฉันยินดีที่จะถ่ายโอนเช่นเดียวกับแพ็คเกจ NPM ที่เกี่ยวข้อง

มีสองฟังก์ชั่นหลัก: flatHeights เพื่อให้ได้ความสูงของบล็อกที่แตกต่างกันของข้อความพร้อมกันปรับให้เหมาะสมสำหรับส่วนประกอบเช่น <FlatList> หรือ <RecyclerListView>

อีกอันหนึ่งคือ measure ซึ่งได้รับข้อมูลโดยละเอียดเกี่ยวกับข้อความของข้อความ:

• ความกว้างที่ใช้โดยข้อความพร้อมตัวเลือกในการคำนวณความกว้างที่แท้จริงของเส้นที่ใหญ่ที่สุด
• ความสูงของข้อความที่มีหรือไม่มีพาย
• จำนวนบรรทัด
• ความกว้างของบรรทัดสุดท้าย
• ข้อมูลเพิ่มเติมของบรรทัดที่กำหนด

ความกว้างและความสูงนั้นใช้งานได้จริงเช่นเดียวกับที่ได้รับจากเหตุการณ์ onLayout ขององค์ประกอบ <Text> ที่มีคุณสมบัติเดียวกัน

ในทั้งสองฟังก์ชั่นจำเป็นต้องมีข้อความที่จะวัดได้ แต่ส่วนที่เหลือของพารามิเตอร์เป็นตัวเลือกและทำงานในลักษณะเดียวกับ React Native:

• fontFamily
• fontSize
• fontWeight
• fontStyle
• fontVariant (iOS)
• includeFontPadding (Android)
• textBreakStrategy (Android)
• letterSpacing
• allowFontScaling
• width : ข้อ จำกัด สำหรับการแตกบรรทัดอัตโนมัติตามกลยุทธ์ข้อความ

ใน Adionion ห้องสมุดมีฟังก์ชั่นเพื่อรับข้อมูลเกี่ยวกับตัวอักษรที่มองเห็นได้จากแอป

หากช่วยคุณได้โปรดสนับสนุนงานของฉันด้วยดาว️หรือ Ko-Fi

การติดตั้ง

การติดตั้งอัตโนมัติส่วนใหญ่จาก NPM

yarn add react-native-text-size
react-native link react-native-text-size

เปลี่ยนคำสั่งคอม compile เป็นการ implementation ในบล็อกการพึ่งพาของไฟล์ Android/App/Build.grale

ความต้องการ:

• ตอบสนอง v0.57 หรือใหม่กว่า
• Android API 16 หรือ iOS 9.0 ขึ้นไป

สำหรับรุ่นก่อน 0.56 ของ React Native โปรดใช้ react-native-text-size-size-size-size-size-text-text-text

ดูการติดตั้งด้วยตนเองบนวิกิเป็นทางเลือกหากคุณมีปัญหาเกี่ยวกับการติดตั้งอัตโนมัติ

API

• measure

• flatHeights

• specsForTextStyles

• fontFromSpecs

• fontFamilyNames

• fontNamesForFamilyName

วัด

 measure ( options : TSMeasureParams ) : Promise < TSMeasureResult >

ฟังก์ชั่นนี้วัดข้อความตามที่ RN ทำและผลลัพธ์ของมันประกอบด้วย* กับเหตุการณ์ onlayout ของ Text ต้องใช้ชุดย่อยของคุณสมบัติที่ใช้โดย <Text> เพื่ออธิบายตัวเลือกตัวอักษรและตัวเลือกที่จะใช้

หากคุณให้ width การวัดจะใช้การห่อหุ้มอัตโนมัตินอกเหนือจากการแบ่งบรรทัดที่ชัดเจน

* อาจมีความไม่ลงรอยกันใน iOS ดูปัญหานี้รู้ว่าต้องรู้เพิ่มเติม

บันทึก:

แม้ว่าฟังก์ชั่นนี้จะถูกต้องและให้ข้อมูลที่สมบูรณ์ แต่อาจหนักหากข้อความมีจำนวนมากเช่นเดียวกับที่สามารถแสดงในรายการแฟลต สำหรับกรณีเหล่านี้จะเป็นการดีกว่าที่จะใช้ flatHeights ซึ่งได้รับการปรับให้เหมาะสมสำหรับการประมวลผลแบบแบตช์

tsmeasureparams

วัตถุ JS ธรรมดาที่มีคุณสมบัตินี้ (ต้องการ text เท่านั้น):

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	หมายเหตุ
ข้อความ	สาย	(ไม่มี)	นี่เป็นพารามิเตอร์ที่จำเป็นเท่านั้นและอาจรวมถึง อิโมจิ หรือว่างเปล่า แต่ ต้องไม่เป็น null หากนี่คือสตริงที่ว่างเปล่า width ที่ได้จะเป็นศูนย์
fontfamily	สาย	ฉันพึ่งพา	ค่าเริ่มต้นคือการใช้งานโดย React Native: Roboto ใน Android, San Francisco ใน iOS หมายเหตุ: ผู้ผลิตอุปกรณ์หรือ ROM ที่กำหนดเองสามารถเปลี่ยนแบบอักษรเริ่มต้น
ฟอนท์เวท	สาย	'ปกติ'	ใน Android ช่วงจำนวนคุณไม่มีความละเอียดและ '500' ถึง '900' กลายเป็น 'ตัวหนา' แต่คุณสามารถใช้ fontFamily ที่มีน้ำหนักเฉพาะ ("sans-serif-thin", "Sans-Serif-Medium" ฯลฯ )
แบบอักษร	ตัวเลข	14	ขนาดตัวอักษรเริ่มต้นมาจาก RN
ฟอนต์สตริตี้	สาย	'ปกติ'	หนึ่งใน "ปกติ" หรือ "ตัวเอียง"
ฟอนท์วาเรียต	อาร์เรย์	(ไม่มี)	iOS เท่านั้น
อนุญาตให้ใช้งาน	บูลีน	จริง	เพื่อเคารพการตั้งค่าแบบอักษรขนาดใหญ่ของผู้ใช้ (เช่นใช้หน่วย SP)
ตัวอักษรที่มีช่องว่าง	ตัวเลข	(ไม่มี)	ระยะห่างเพิ่มเติมระหว่างอักขระ ( tracking AKA) หมายเหตุ: ใน iOS ไม่มีการยกเลิก kerning อัตโนมัติ iOS ทั้งหมด Android กับ API 21+
รวมถึงการจัดหา	บูลีน	จริง	การเพิ่มช่องว่างด้านบนและด้านล่างเพื่อหลีกเลี่ยงการตัดอักขระบางตัว Android เท่านั้น
Breakstrategy	สาย	'Highqualy'	หนึ่งใน 'Simple', 'Balanced' หรือ 'Highqualy' Android เท่านั้นด้วย API 23+
ความกว้าง	ตัวเลข	max_int	จำกัด ความกว้าง ความสูงของผลลัพธ์จะแตกต่างกันไปขึ้นอยู่กับการไหลของข้อความอัตโนมัติ
useprecisewidth	บูลีน	เท็จ	หาก true ผลลัพธ์จะรวมถึง width ที่แน่นอนและคุณสมบัติ lastLineWidth คุณสามารถดูเอฟเฟกต์ของธงนี้ในแอพตัวอย่าง
lineinfoforline	ตัวเลข	(ไม่มี)	if >=0 ผลลัพธ์จะรวมถึงคุณสมบัติ lineInfo พร้อมข้อมูลสำหรับหมายเลขบรรทัดที่ต้องการ

แอพตัวอย่างแสดงผลกระทบของพารามิเตอร์เหล่านี้บนหน้าจอแบบโต้ตอบ

tsmeasureresult

measure ส่งคืนสัญญาที่แก้ไขไปยังวัตถุ JS ด้วยคุณสมบัตินี้:

คุณสมบัติ	พิมพ์	หมายเหตุ
ความกว้าง	ตัวเลข	ความกว้างที่ใช้ทั้งหมด อาจเป็น LES หรือเท่ากับตัวเลือก width บน Android ค่านี้อาจแตกต่างกันไปขึ้นอยู่กับธง usePreciseWidth
ความสูง	ตัวเลข	ความสูงทั้งหมดรวมถึงช่องว่างด้านบนและด้านล่างหาก includingFontPadding การตั้งค่า (ค่าเริ่มต้น)
LastlineWidth	ตัวเลข	ความกว้างของบรรทัดสุดท้ายโดยไม่มีช่องว่าง หาก usePreciseWidth เป็น false (ค่าเริ่มต้น) คุณสมบัตินี้จะไม่ได้กำหนด
linecount	ตัวเลข	จำนวนบรรทัดโดยคำนึงถึงการแบ่งบรรทัดที่ยากและอัตโนมัติ
lineinfo	วัตถุ	ข้อมูลบรรทัด หากไม่ได้รับตัวเลือก lineInfoForLine คุณสมบัตินี้จะไม่ได้กำหนด

lineinfo

หากค่าของ lineInfoForLine คือ greelter หรือ lineCount เท่ากันข้อมูลนี้มีไว้สำหรับบรรทัดสุดท้าย (เช่น lineCount - 1)

คุณสมบัติ	พิมพ์	หมายเหตุ
เส้น	ตัวเลข	หมายเลขบรรทัดของข้อมูลนี้ฐาน 0 อาจน้อยกว่าสาย lineInfoForLine
เริ่ม	ตัวเลข	ข้อความชดเชยของจุดเริ่มต้นของบรรทัดนี้
จบ	ตัวเลข	ข้อความชดเชยหลังจากอักขระ ที่มองเห็นได้ ล่าสุด (ดังนั้นช่องว่างไม่ได้นับ) ในบรรทัดนี้
ด้านล่าง	ตัวเลข	ตำแหน่งแนวตั้งของด้านล่างของบรรทัดนี้รวมถึงช่องว่างภายใน
ความกว้าง	ตัวเลข	exte แนวนอนของบรรทัดนี้รวมถึงการเยื้องขอบชั้นนำ แต่ไม่รวม whitespace ต่อท้าย ใช้ usePreciseWidth:true เพื่อรับมูลค่าที่ถูกต้องสำหรับคุณสมบัตินี้

ในกรณีที่เกิดข้อผิดพลาดสัญญาจะถูกปฏิเสธด้วยวัตถุเพิ่มเติมที่มีหนึ่งในรหัสข้อผิดพลาดต่อไปนี้เป็นสตริงตัวอักษร:

รหัส	รายละเอียด
e_missing_parameters	measure ต้องการวัตถุที่มีพารามิเตอร์ซึ่งไม่ได้ให้ไว้
e_missing_text	ข้อความที่จะวัดเป็น null หรือไม่ได้ให้
e_invalid_font_spec	ข้อกำหนดตัวอักษรไม่ถูกต้อง ไม่น่าเป็นไปได้ที่สิ่งนี้จะเกิดขึ้นกับ Android
e_unknown_error	ดี ... ใครจะรู้?

ตัวอย่าง

 //...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'

type Props = { }
type State = { width : number , height : number }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
  fontFamily = undefined ,
  fontSize = 24 ,
  fontStyle = 'italic' ,
  fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'

class Test extends Component < Props , State > {
  state = {
    width : 0 ,
    height : 0 ,
  }

  async componentDidMount ( ) {
    const width = Dimensions . get ( 'window' ) . width * 0.8
    const size = await rnTextSize . measure ( {
      text ,             // text to measure, can include symbols
      width ,            // max-width of the "virtual" container
      ... fontSpecs ,     // RN font specification
    } )
    this . setState ( {
      width : size . width ,
      height : size . height
    } )
  }

  // The result is reversible
  render ( ) {
    const { width , height } = this . state
    return (
      < View style = { { padding : 12 } } >
        < Text style = { { width , height , ... fontSpecs } } >
          { text }
        </ Text >
      </ View >
    )
  }
} 

ความสุข

 flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >

คำนวณความสูงของแต่ละสตริงในอาร์เรย์

นี่เป็นอีกทางเลือกหนึ่งใน measure ที่กำหนดสำหรับกรณีที่คุณได้คำนวณความสูงของบล็อกข้อความจำนวนมากที่มีลักษณะทั่วไป (ความกว้าง, ตัวอักษร ฯลฯ ), กรณีการใช้งานทั่วไปที่มี <FlatList> หรือ <RecyclerListView> ส่วนประกอบ

การวัดใช้อัลกอริทึมเดียวกับ measure แต่จะส่งคืนความสูงของแต่ละบล็อกเท่านั้นและโดยการหลีกเลี่ยงหลายขั้นตอนผ่านสะพานมันเร็วกว่า ... เร็วกว่า บน Android!

ฉันทำการทดสอบกับบล็อกข้อความสุ่ม 5,000 รายการและนี่คือผลลัพธ์ (MS):

	measure	flatHeights
Android	49,624	1,091
iOS	1,949	732

ในอนาคตฉันจะเตรียมตัวอย่างของการใช้งานกับ Flatlist และหลายสไตล์บนการ์ดใบเดียวกัน

Tsheightsparams

นี่คือวัตถุที่คล้ายกับที่คุณผ่านไปเพื่อ measure แต่ตัวเลือก text คืออาร์เรย์ของสตริงและตัวเลือก usePreciseWidth และ lineInfoForLine จะถูกละเว้น

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น
ข้อความ	สตริง []	(ไม่มี)
ความกว้าง	ตัวเลข	อินฟินิตี้
fontfamily	สาย	ฉันพึ่งพา
ฟอนท์เวท	สาย	'ปกติ'
แบบอักษร	ตัวเลข	14
ฟอนต์สตริตี้	สาย	'ปกติ'
ฟอนท์วาเรียต	อาร์เรย์	(ไม่มี)
อนุญาตให้ใช้งาน	บูลีน	จริง
ตัวอักษรที่มีช่องว่าง	ตัวเลข	(ไม่มี)
รวมถึงการจัดหา	บูลีน	จริง
Breakstrategy	สาย	'Highqualy'

ผลลัพธ์เป็นสัญญาที่แก้ไขอาร์เรย์ที่มีความสูงของแต่ละบล็อก (ใน SP ) ในลำดับเดียวกับที่ได้รับบล็อก

ซึ่งแตกต่างจากการวัดองค์ประกอบ null จะส่งคืน 0 โดยไม่ต้องสร้างข้อผิดพลาดและสตริงที่ว่างเปล่าจะส่งคืนความสูงเท่ากันที่ RN กำหนดให้ null <Text> ส่วนประกอบที่ว่างเปล่า

ตัวอย่าง

 //...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'

type Props = { texts : string [ ] }
type State = { heights : number [ ] }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
  fontFamily = undefined ,
  fontSize = 24 ,
  fontStyle = 'italic' ,
  fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]

class Test extends Component < Props , State > {
  state = {
    heights : [ ] ,
  }

  async componentDidMount ( ) {
    const { texts } = this . props
    const width = Dimensions . get ( 'window' ) . width * 0.8
    const heights = await rnTextSize . flatHeights ( {
      text : texts ,      // array of texts to measure, can include symbols
      width ,            // max-width of the "virtual" container
      ... fontSpecs ,     // RN font specification
    } )
    this . setState ( {
      heights
    } )
  }

  render ( ) {
    const { texts } = this . props
    const { heights } = this . state
    
    return (
      < View style = { { padding : 12 } } >
        { texts . map (
          ( text , index ) => (
            < Text style = { { height : heights [ index ] , ... fontSpecs } } >
              { text }
            </ Text >
          )
        ) }
      </ View >
    )
  }
} 

specsfortextstyles

 specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >

รับข้อมูลตัวอักษรของระบบสำหรับระบบปฏิบัติการที่กำลังทำงานอยู่

นี่คือเสื้อคลุมสำหรับ UIFont.preferredFontForTextStyle oros

ผลที่ได้คือคำสัญญาที่แก้ไขให้กับปุ่ม JS WHOE Keys ขึ้นอยู่กับระบบปฏิบัติการ แต่ค่าของมันจะกลับมาใช้งานได้อย่างสมบูรณ์กับที่ใช้ในรูปแบบ RN ดังนั้นจึงสามารถใช้ในการจัดสไตล์ <Text> หรือ <TextInput> ส่วนประกอบ:

tsfontfortyle

คุณสมบัติ	พิมพ์	หมายเหตุ
fontfamily	สาย	ชื่อครอบครัวหรือหน้าอักษร
แบบอักษร	ตัวเลข	ขนาดตัวอักษรใน SP (unscaled)
ฟอนต์สตริตี้	tsfontstyle	เฉพาะในกรณีที่ 'italic', ไม่ได้กำหนดถ้าสไตล์เป็น 'ปกติ'
ฟอนท์เวท	tsfontweight	เฉพาะในกรณีที่ 'ตัวหนา' ไม่ได้กำหนดถ้าน้ำหนักเป็น 'ปกติ'
ฟอนท์วาเรียต	tsfontvariant [] หรือ null	iOS เท่านั้น ปัจจุบันไม่มีสไตล์รวมถึงคุณสมบัตินี้
ตัวอักษรที่มีช่องว่าง	ตัวเลข	ละเว้นหากทำงานบน Android ที่มี RN loower มากกว่า 0.55

หากต้องการทราบชื่อคีย์โปรดดูคีย์จาก specsfortextstyles ในวิกิ

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

FontFromSpecs

 fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >

ส่งคืนลักษณะของตัวอักษรที่ได้จากข้อกำหนดที่กำหนด

tsfontspecs

พารามิเตอร์นี้เป็นชุดย่อยของ TSMeasureParams ดังนั้นรายละเอียดจะถูกละเว้นที่นี่

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น
fontfamily	สาย	iOS: 'ซานฟรานซิสโก', Android: 'Roboto'
ฟอนท์เวท	สาย	'ปกติ'
แบบอักษร	ตัวเลข	14
ฟอนต์สตริตี้	สาย	'ปกติ'
ฟอนท์วาเรียต	สตริง []	(ไม่มี)
ตัวอักษรที่มีช่องว่าง	ตัวเลข	0

fontFromSpecs ใช้ allowsFontScaling:true และเนื่องจากนี่ไม่ใช่ฟังก์ชั่นการวัด includeFontPadding คุณไม่มีความหมาย

tsfontinfo

ผลลัพธ์เป็นสัญญาที่แก้ไขวัตถุ JS พร้อมข้อมูลสำหรับตัวอักษรและขนาดที่กำหนดหน่วยใน SP ใน Android หรือคะแนนใน iOS โดยใช้หมายเลขจุดลอยตัวที่ใช้งานได้*

คุณสมบัติ	พิมพ์	รายละเอียด
fontfamily	สาย	ใน Android มันเป็นสตริงเดียวกันที่ส่งผ่านเป็นพารามิเตอร์
ตัวอักษร	สาย	iOS เท่านั้น undefined ใน Android เสมอ
แบบอักษร	ตัวเลข	มันอาจแตกต่างจากพารามิเตอร์ที่กำหนดหากพารามิเตอร์มีทศนิยม
ฟอนต์สตริตี้	สาย	'ปกติ' หรือ 'ตัวเอียง'
ฟอนท์เวท	สาย	'ปกติ' หรือ 'ตัวหนา' บน iOS สามารถเปลี่ยนจาก '100' ถึง '900'
ฟอนท์วาเรียต	สตริง []	iOS เท่านั้น undefined ใน Android เสมอ
ขึ้นไป	ตัวเลข	ระยะทางที่แนะนำเหนือพื้นฐานสำหรับข้อความเว้นระยะแยก
ลงมา	ตัวเลข	ระยะทางที่แนะนำด้านล่างพื้นฐานสำหรับข้อความเว้นระยะแยก
หัวรุนแรง	ตัวเลข	iOS ความสูงของตัวละครทุนเท่านั้น
xheight	ตัวเลข	iOS ความสูงเพียง ตัวพิมพ์เล็ก "x"
สูงสุด	ตัวเลข	Android เท่านั้น ระยะทางสูงสุดเหนือระดับพื้นฐานสำหรับ Glyph Tallles ในตัวอักษร
ด้านล่าง	ตัวเลข	Android เท่านั้น ระยะทางสูงสุดด้านล่างพื้นฐานสำหรับร่ายมนตร์ต่ำสุดในตัวอักษร
เป็นผู้นำ	ตัวเลข	พื้นที่การเติมที่แนะนำเพื่อเพิ่มระหว่างบรรทัดของข้อความ
LineHeight	ตัวเลข	ความสูงของเส้นที่แนะนำ มันควรจะยิ่งใหญ่กว่าถ้าข้อความมีสัญลักษณ์ Unicode เช่นอิโมจิ
_กัญชา	ตัวเลข	รหัสแฮชอาจเป็นประโยชน์สำหรับการดีบัก

* การใช้ลอยนั้นแม่นยำกว่าจำนวนเต็มและช่วยให้คุณใช้วิธีการปัดเศษที่คุณต้องการ แต่ไม่เกิน 5 หลักของความแม่นยำในค่านี้ นอกจากนี้โปรดจำไว้ว่า RN ไม่ทำงานกับพิกเซลย่อยใน Android และจะตัดทอนค่านี้

ดูเพิ่มเติมใน:

ทำความเข้าใจเกี่ยวกับการพิมพ์ที่เว็บไซต์ออกแบบวัสดุของ Google

เกี่ยวกับการจัดการข้อความใน iOS สำหรับ iOS

fontfamilynames

 fontFamilyNames ( ) : Promise < string [ ] >

ส่งคืนสัญญาสำหรับชื่อตระกูลฟอนต์ที่มีอยู่ในระบบ

บน iOS คุณใช้วิธี UIFont.familyNames ของ Uikit

บน Android ผลลัพธ์เป็นรหัสที่ยากสำหรับแบบอักษรของระบบและเติมเต็มแบบไดนามิกด้วยแบบอักษรที่ติดตั้งโดยแอปของคุณถ้ามี

ดูเกี่ยวกับแบบอักษร Android และแบบอักษรที่กำหนดเองใน Wiki เพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับรายการนี้

fontnamesforfamilyname

 fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] >

wrapper สำหรับ UIFont.fontNamesForFamilyName วิธีการของ Uikit ส่งคืนชื่อตัวอักษรอาร์เรย์ที่มีอยู่ในตระกูลตัวอักษรเฉพาะ

คุณสามารถใช้ฟังก์ชั่น fontFamilyNames ของ RNTextSize เพื่อรับอาร์เรย์ของชื่อตระกูลตัวอักษรที่มีอยู่ในระบบ

นี่เป็นฟังก์ชั่น iOS เท่านั้น บน Android มันจะแก้ไขให้เป็น null เสมอ

ปัญหาที่รู้จัก

ความกว้างที่ไม่สอดคล้องกันระหว่างแพลตฟอร์ม

ใน iOS ความกว้างที่เกิดขึ้นของทั้งสอง measure และ flatHeights รวมถึงช่องว่างชั้นนำในขณะที่ใน Android สิ่งเหล่านี้จะถูกทิ้ง

ความสูงที่ไม่ถูกต้อง (iOS)

บน iOS RN จะคำนึงถึงตำแหน่งที่แน่นอนบนหน้าจอเพื่อคำนวณขนาด rntextsize ไม่สามารถทำเช่นนั้นและทั้งความกว้างและความสูงสามารถมีความแตกต่างสูงสุด 1 พิกเซล (ไม่ใช่จุด)

ตัวอักษรไม่ปรับขนาด (iOS)

RN ไม่รองรับขนาดประเภทแบบไดนามิก แต่งานที่ยอดเยี่ยมเลียนแบบคุณสมบัตินี้ผ่านการอนุญาต allowFontScaling ดี ... excep สำหรับ letterSpacing ที่ไม่ได้ปรับขนาด

ฉันหวังว่า RN เวอร์ชันในอนาคตจะแก้ปัญหานี้ได้

การสนับสนุน LineHeight

แม้ว่า RnTextSize จะให้ lineHeight ที่ได้ในฟังก์ชั่นผลรวม แต่ก็ไม่รองรับมันเป็นพารามิเตอร์เนื่องจากคุณใช้อัลกอริทึมที่ไม่ได้มาตรฐานเพื่อตั้งค่า ฉันขอแนะนำให้คุณไม่ใช้ lineHeight เว้นแต่ว่ามันขัดสนอย่างเคร่งครัด แต่ถ้าคุณใช้ให้ลองทำมัน 30% หรือมากกว่าขนาดตัวอักษรหรือใช้วิธี RNTextSize fontFromSpecs หากคุณต้องการความแม่นยำมากขึ้น

ข้อความซ้อน

ส่วนประกอบที่ซ้อนกัน <Text> (หรือมีภาพภายใน)

ทั้งหมด

• การติดตามปกติหรือระยะห่างจดหมายในข้อมูลแบบอักษร
• การทดสอบเพิ่มเติมรวมถึงทีวี Android และ iOS
• เรียนรู้ภาษาอังกฤษที่สวยงามเพื่อสร้างเอกสารให้ดีขึ้น
• Fint ลดลงอย่างดีใน Objective-C น่าเกลียด

สนับสนุนงานของฉัน

ฉันเป็นนักพัฒนาเต็มรูปแบบที่มีประสบการณ์มากกว่า 20 ปีและฉันพยายามแบ่งปันงานส่วนใหญ่ของฉันฟรีและช่วยเหลือผู้อื่น แต่สิ่งนี้ต้องใช้เวลาและความพยายามอย่างมากดังนั้นหากคุณชอบงานของฉันโปรดพิจารณา ...

แน่นอนว่าข้อเสนอแนะ PRS และดาวก็ยินดีต้อนรับด้วยหรือไม่?

ขอบคุณสำหรับการสนับสนุนของคุณ!

ใบอนุญาต

ใบอนุญาต "ง่าย" BSD 2 ข้อ

© 2018-2019, Alberto Martínez สงวนลิขสิทธิ์