React Native - Как да центрирате текст и автоматично да регулирате размера на шрифта в компонента на View

ВИЖТЕ Актуализация в BOTTOM.

Значи ви е трудно да поставите текста си правилно във възел?

Well React Native има някои незадокументирани свойства, които можете да добавите към компонента (който понастоящем не е наличен на тяхната страница с документи за текстови компоненти), но нека започнем с проблема.

Имате текст, който изглежда така:

Реагирайте нативния списък на текстовите компоненти (преди монтирането)

Вашият код изглежда приблизително така:

нека array = [{"subreddit_name_prefixed": "r / worldnews", цвят: "# FFBC42"}, {"subreddit_name_prefixed": "r / политика", цвят: "# 80CED7"}, {"subreddit_name_prefixed": "r / PublicBelief ", цвят:" # ABC4AB "}, {" subreddit_name_prefixed ":" R / inthenews ", цвят:" # E26D5A "}]
.......

        {array.map ((елемент, i) => {
            връщане (<Ключ за докосванеOpacity = {i}
              стил = {[{
                шнур: 1,
                backgroundColor: "RGBA (0,0,0,0)",
                  justifyContent: "център",
                  alignItems: "център",
                  borderRadius: 10,
                  borderWidth: 1,
                  borderWidth: 2,
                  BORDERCOLOR: "RGBA (0,0,0, 0,3)",
                  височина: 40,
                  марж: 3,
                  backgroundColor: item.color,
              }]}>
              <Текст
              // adjustsFontSizeToFit = {вярно}
              // numberOfLines = {1}
              стил = {{
                textAlignVertical: "център",
                textAlign: "център",
                backgroundColor: "RGBA (0,0,0,0)",
                цвят: "RGBA (0,0,0, 0,3)",
              }}> {Item.subreddit_name_prefixed} 
            )
          })
        }
      

Затова се огледа и видя това

това https://github.com/facebook/react-native/isissue/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

НО ПОЧАКАЙТЕ, не го правите sicko, защото вие никога не сте проверявали самата библиотека React Native Text, преди да сте го направили? Засрами се. Можете да направите това, като изпълните следното от своя Root Directory Projects.

отворени node_modules / реагиране-native / Библиотеки / Текст

Това, което намерих / което търсите, е https://github.com/facebook/react-native/blob/master/Libraries/Text/RCTShadowText.h

Това са някои (или всички? - не разгледах всички файлове с текстови папки) на наличните параметри на текстовия компонент, които можете да използвате. Къде би изглеждало следното във вашата функцияrerender ():

<Текст
        цвят = {Цвят}
        fontFamily = {String}
        FONTSIZE = {поплавък}
        fontWeight = {String}
        fontStyle = {String}
        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 и позволяваFontScaling и в крайна сметка просто използвах adjustsFontSizeToFit.

Моят окончателен код:

<Вижте стил = {{flex: 1, височина, ширина, justifyContent: "center", flexDirection: "row", alignItems: "center", backgroundColor: "# F5FCFF",}}>
        {array.map ((елемент, i) => {
            връщане (<Ключ за докосванеOpacity = {i}
              стил = {[{
                шнур: 1,
                backgroundColor: "RGBA (0,0,0,0)",
                  justifyContent: "център",
                  alignItems: "център",
                  borderRadius: 10,
                  borderWidth: 1,
                  borderWidth: 2,
                  BORDERCOLOR: "RGBA (0,0,0, 0,3)",
                  височина: 40,
                  марж: 3,
                  backgroundColor: item.color,
              }]}>
              <Текст
              adjustsFontSizeToFit
              numberOfLines = {1}
              // позволяваFontScaling
              стил = {{
                / *
                 * Следните стилове могат да причинят конфликт, ако се използват
                 * в предположение с 'numberOfLines'
                 * или 'prilagodesFontSizeToFit':
                     => fontSize, височина, ширина, flex, margin
                * /
                textAlignVertical: "център",
                textAlign: "център",
                backgroundColor: "RGBA (0,0,0,0)",
                цвят: "RGBA (0,0,0, 0,3)",
              }}> {Item.subreddit_name_prefixed} 
            )
          })
        }
      

Резултат:

Най-добри практики:

След като играех с него известно време забелязах някои предупреждения, докато използвах adjustsFontSizeToFit и това е причината, поради която все още не е документирано.

Бих получил странни резултати, когато използвам определени стилове в комбинация с текстовия компонент, които включват: fontSize, височина, ширина, гъвкавост и марж, само за да назовем няколко, това ще доведе до това да изглежда нещо следното:

Когато използвате добавяне на {flex: 1} към стиловеКогато декларирате ширина (напр. {Width: 50}) в стилове

Дано това помогне на някого.

Това е първата ми публикация в средния блог (официалният ми блог е на http://vyga.io/blog) и бих искал да продължа да се гмурна по-дълбоко в някои пренебрегвани или райони, които не се обсъждат в други блогове в React Native, и това може да тежи на успеха на тази публикация, така че ако вие това и / или това е било полезно, моля, кажете го в коментарите и бих искал да го направя отново.

Също така, ако съм пропуснал нещо или ако можех да направя нещо по-добро, уведомете ме. Благодаря отново!

UPDATE:

Вижте документите на React Native Text, ако това се е актуализирало, като щракнете по-долу.

TLDR;

Ето някои актуализации, които исках да добавя, тъй като установих, че продължавам да реферирам към това и исках сортове на листа.

Използвайте следните подпори в текстовите си компоненти:

1. Първо опитайте да добавите следния стил към стиловете си StyleSheet.create ({})

centerText: {textAlign: "център", textAlignVertical: "център"},

след това използвайте в стил:

ПРИМЕР 1:

<Текст стил = {[styles.centerText]}> Център ли съм?

2. Използвайте adjustsFontSizeToFit

И по желание използвайте minimalFontScale (със стойност 0 до 1) в предположенията.

ПРИМЕР 2:

<Текстът коригираFontSizeToFit минимумFontScale = {. 5}> Центриран ли съм?

Забележка:

Известията се объркват при използване на следните стилове:

fontSize, височина, ширина, flex, margin

Затова първо опитайте да ги пропуснете.

3. Използвайте numberOfLines

Това ще ограничи броя на линиите, показани преди отрязани.

ПРИМЕР 3:

<Текст номерOfLines = {1}> Ограничаване до един ред!

4. Използвайте enableFontScaling

Посочва дали шрифтовете да се увеличават, за да спазват настройките за достъпност на текстовия размер.

ПРИМЕР 4:

Център ли съм?

5. Клопнете, ако сте харесали този пост.

също да ме последвате в Twitter в @vygaio или да видите другия ми среден акаунт най-много ще се опитам да използвам по-често ʇʇǝɹɹɐƃ