React Native - كيفية توسيط النص وضبط تلقائي لحجم الخط داخل عرض المكون

انظر التحديث في القاع.

إذن أنت تواجه صعوبة في تركيب نصك في العقدة بشكل صحيح؟

يحتوي Rea React Native على بعض الخصائص غير الموثقة التي يمكنك إضافتها إلى المكون (الذي لا يتوفر حاليًا في صفحة مستندات Text Components الخاصة بهم) ولكن لنبدأ بالمشكلة.

لديك نص يشبه هذا:

رد القائمة الأصلية لمكونات النص (قبل تركيبها)

يبدو الرمز الخاص بك نهائيًا مثل هذا:

دع صفيف = [{"subreddit_name_prefixed": "r / worldnews"، colour: "# FFBC42"}، {"subreddit_name_prefixed": "r / political"، اللون: "# 80CED7"}، {"subreddit_name_prefixed": "r / PublicBelief "، اللون:" # ABC4AB "}، {" subreddit_name_prefixed ":" ص / inthenews "، اللون:" # E26D5A "}]
.......
<عرض النمط = {{flex: 1 ، الطول ، العرض ، justifyContent: "center" ، flexDirection: "row"، alignItems: "center"، backgroundColor: "# F5FCFF"،}}>
        {array.map ((item، i) => {
            return (
              نص <
              // adjustsFontSizeToFit = {صحيح}
              // numberOfLines = {1}
              النمط = {{
                textAlignVertical: "center"،
                textAlign: "center" ،
                backgroundColor: "رغبا (0،0،0،0) '،
                اللون: "رغبا (0،0،0، 0،3) '،
              }}> {item.subreddit_name_prefixed} 
            )
          })
        }
      

لذلك نظرت حولي ورأيت هذا

هذا https://github.com/facebook/react-native/issues/728

وهذا https://github.com/facebook/react-native/pull/4026

وهذا https://stackoverflow.com/questions/37571418/reactnative-how-to-center-text

لا شيء حقًا حل هذه المشكلة ، لذا يمكنك استخدام هذا: https://github.com/ReactNativeBox/react-native-textfit

ولكن الانتظار ، لا تفعل ذلك ، لأنك لم تقم بالفعل بمراجعة مكتبة React Native Text نفسها قبل قيامك بذلك؟ حرج عليك. يمكنك القيام بذلك عن طريق تشغيل ما يلي من دليل جذر المشروعات.

فتح node_modules / رد الفعل الأصلي / المكتبات / النص

ما وجدته / ما تبحث عنه هو https://github.com/facebook/react-native/blob/master/Libraries/Text/RCTShadowText.h

هذه بعض (أو كلها؟ - لم أطلع على جميع ملفات مجلدات النص) لمعايير مكون النص المتاح التي يمكنك استخدامها. حيث سيبدو كما يلي في yourrender () وظيفة:

نص <
        اللون = {اللون}
        fontFamily = {سلسلة}
        حجم الخط = {تعويم}
        fontWeight = {سلسلة}
        fontStyle = {سلسلة}
        fontVariant = {NSArray}
        isHighlighted = {منطقية}
        letterSpacing = {تعويم}
        lineHeight = {تعويم}
        numberOfLines = {صحيح}
        ellipsizeMode = {NSLineBreakMode}
        shadowOffset = {CGSize}
        textAlign = {NSTextAlignment}
        writingDirection = {NSWritingDirection}
        textDecorationColor = {اللون}
        textDecorationStyle = {UnderlineStyle}
        textDecorationLine = {TextDecorationLineType}
        fontSizeMultiplier = {تعويم}
        allowFontScaling = {منطقية}
        التعتيم = {تعويم}
        textShadowOffset = {CGSize}
        textShadowRadius = {تعويم}
        textShadowColor = {اللون}
        adjustsFontSizeToFit = {منطقية}
        minimumFontScale = {تعويم}
        اختيار = {منطقية}>
        Hiiiizz
      

بعد أن اكتشفت هذا ، عثرت على اثنين لفتا انتباهي إلى ضبط FontSizeToFit و allowFontScaling وانتهى بهما الأمر فقط باستخدام adjustsFontSizeToFit.

الرمز النهائي الخاص بي:

<عرض النمط = {{flex: 1 ، الطول ، العرض ، justifyContent: "center" ، flexDirection: "row"، alignItems: "center"، backgroundColor: "# F5FCFF"،}}>
        {array.map ((item، i) => {
            return (
              نص <
              adjustsFontSizeToFit
              numberOfLines = {1}
              // allowFontScaling
              النمط = {{
                / *
                 * الأنماط التالية قد تسبب تعارضًا إذا تم استخدامها
                 * في التخمين مع "numberOfLines"
                 * أو "adjustsFontSizeToFit":
                     => حجم الخط ، الطول ، العرض ، المرن ، الهامش
                * /
                textAlignVertical: "center"،
                textAlign: "center" ،
                backgroundColor: "رغبا (0،0،0،0) '،
                اللون: "رغبا (0،0،0، 0،3) '،
              }}> {item.subreddit_name_prefixed} 
            )
          })
        }
      

نتيجة:

افضل تمرين:

بعد اللعب معها لفترة من الوقت ، لاحظت بعض المحاذير أثناء استخدام AdjustsFontSizeToFit وهذا هو السبب في أنه لم يتم توثيقه بعد.

سأحصل على نتائج غريبة عند استخدام أنماط معينة مع "مكون النص" التي تشمل: حجم الخط والطول والعرض والثني والهامش فقط على سبيل المثال لا الحصر ، سيؤدي ذلك إلى ظهور شيء ما يلي:

عند استخدام إضافة {flex: 1} إلى الأنماطعند إعلان العرض (مثل {width: 50}) في الأنماط

أمل أن هذا يساعد شخصاما.

هذا هو أول منشور لي في المدونة المتوسطة (مدونتي الرسمية موجودة على http://vyga.io/blog) ، وأرغب في مواصلة الغوص العميق في بعض المجالات التي تم تجاهلها أو المنطقة التي لم يتم مناقشتها على المدونات الأخرى في React Native ، وقد يؤثر ذلك على نجاح هذا المنشور ، لذا إذا كنت هذا و / أو كان هذا مفيدًا ، فيرجى ذكر ذلك في التعليقات وأحب القيام بذلك مرة أخرى.

أيضا إذا فاتني أي شيء أو إذا كان بإمكاني القيام بأي شيء ، فأخبرني بذلك. شكرا لك مرة أخرى!

تحديث:

راجع مستندات React Native Text إذا كان هذا قد تم تحديثه من خلال النقر أدناه.

TLDR.

إليك بعض التحديثات التي أردت إضافتها حيث وجدت نفسي أواصل الرجوع إلى هذا وأردت ورقة بيانات من نوع ما.

استخدم الدعائم التالية في مكونات النص:

1. جرِّب أولاً إضافة النمط التالي إلى أنماطك StyleSheet.create ({})

centerText: {textAlign: "الوسط"، textAlignVertical: "مركز"}،

ثم استخدم في الاسلوب:

مثال 1:

هل تم توسيطي؟

2. استخدام adjustsFontSizeToFit

واختياريا استخدام minimalFontScale (مع القيمة 0 إلى 1) في التخمين.

مثال 2:

هل أنا مركز؟

ملحوظة:

تختلط الإشعارات عند استخدام الأنماط التالية:

حجم الخط ، الطول ، العرض ، المرن ، الهامش

لذا حاول أولاً إهمالها.

3. استخدام numberOfLines

سيؤدي هذا إلى تحديد عدد الخطوط المعروضة قبل اقتطاعها.

مثال 3:

الحد إلى سطر واحد!

4. استخدام allowFontScaling

لتحديد ما إذا كان يجب قياس الخطوط لاحترام إعدادات إمكانية الوصول إلى حجم النص.

مثال 4:

هل يتم توسيطي؟

5. التصفيق إذا كنت تحب هذا المنصب.

أيضًا متابعتي على twitter علىvygaio أو الاطلاع على معظم حساباتي المتوسطة الأخرى التي سأحاول استخدامها أكثر من مرة ʇʇǝɹɹɐƃ