Как настроить размер шрифта в соответствии с представлением в React Native для Android?

Как сделать так, чтобы размер шрифта текста автоматически изменялся внутри представления в реагировать на нативную версию?

У меня есть текст с различной длиной, некоторые из которых не соответствуют виду, поэтому уменьшил размер шрифта. Я проверил документы и нашел это, но это только для iOS, и мне нужно это для Android.

И работает ли он с другими компонентами, такими как кнопка и touchableopacity?

Ответы

Ответ 1

Попробуйте этот подход. Рассмотрите возможность установки размера шрифта в соответствии с шириной экрана следующим образом:

width: Dimensions.get('window').width

Поэтому в вашем стиле попробуйте сделать процентный расчет, чтобы размер шрифта соответствовал экрану

style={
  text:{
     fontSize:0.05*width
  }
}

это будет работать для всех экранов (как Android, так и IOS)

Ответ 2

Я думаю, что лучший способ сделать это, используя встроенные реквизиты Text компонента следующим образом:

<Text adjustsFontSizeToFit minimumFontScale={.5}>Hello World</Text>

Используйте эти три реквизита вместе, чтобы получить лучшие результаты:

adjustsFontSizeToFit
minimumFontScale={.5} // or any other value you prefer between 0 and 1
allowFontScaling

Однако вы не должны использовать определенные стили при использовании реквизита я только что говорил, как, например:

fontSize,
height,
width, 
flex,
margin

Ответ 3

Лучший способ реализовать размер шрифта, основанный на разрешении, - это использовать Pixel Ratio, я реализовал этот подход во всем моем приложении. Pixel Ratio - это то, что поможет вам в этом. Меньше соотношение пикселей означает меньшее разрешение, большее количество пикселей - большее разрешение.

PixelRatio.get() === 1 Android-устройства mdpi (160 dpi)

PixelRatio.get() === 1.5 hdpi Android-устройства (240 dpi)

PixelRatio.get() === 2 iPhone 4, 4S iPhone 5, 5c, 5s iPhone 6 xhdpi Android-устройства (320 dpi)

PixelRatio.get() === 3 iPhone 6 плюс xxhdpi Android-устройства (480 dpi)

PixelRatio.get() === 3.5 Nexus 6

Ниже фрагмента кода является таблица стилей, и вы можете использовать классы в коде JSX

import { StyleSheet, PixelRatio } from 'react-native'
import { Colors } from '../../Themes/'
const FONT_SIZE = 12;
FONT_SIZE_Requests = 12;
if ((PixelRatio.get() <= 1.5) &&(PixelRatio.get() > 1)) {
  FONT_SIZE = 9;
  FONT_SIZE_Requests = 9;
} else if (PixelRatio.get() <=1) {
  FONT_SIZE = 9;
  FONT_SIZE_Requests=9;
} else if ((PixelRatio.get() > 1.5) &&( PixelRatio.get() >= 2) && (PixelRatio.get() < 3)) {
         FONT_SIZE = 10;
         FONT_SIZE_Requests = 10;
       } else if (PixelRatio.get() >= 3) {
         FONT_SIZE = 11;
         FONT_SIZE_Requests = 11;
       }
export default StyleSheet.create({
  header: {
    backgroundColor: Colors.ClayColor
  },
  transparentHeader: {
    backgroundColor: "#ffffff",
    elevation: 0
  },
labelStyle:{
   margin:0,
        fontFamily:'roboto_medium',
        fontSize:FONT_SIZE
},
labelStyleRequests:{
  margin:0,
  fontFamily:'roboto_medium',
  fontSize:FONT_SIZE_Requests
}
})