react native text size
v3.0.0
Meça o texto com correção antes de colocá -lo e obter informações da fonte do seu aplicativo (Android e iOS).
| No meu país (México), os desenvolvedores de software são mal pagos, por isso tive que procurar outro emprego para ganhar a vida e não posso dedicar mais tempo a maingar este e outros repositórios que, ao longo dos anos, precisavam gerar dinheiro para mim. Se alguém estiver interessado em manter esse repositório, ficaria feliz em transferi -lo para eles, junto com o pacote NPM associado. |
|---|
| No meu país (México), os desenvolvedores de software estão aterrorizados, então tive que procurar outro emprego para ganhar a vida e não posso gastar mais tempo mantendo esses e outros repositórios do que por anos nunca gerou dinheiro. Se alguém estiver interessado em manter esse repositório, vou transferi -lo com prazer, bem como o pacote NPM associado. |
Existem duas funções principais: flatHeights para obter a altura de diferentes blocos de texto simultaneamente, otimizados para componentes como <FlatList> ou <RecyclerListView> .
O outro é measure , que recebe informações detalhadas sobre o texto do texto:
A largura e a altura são práticas da mesma forma que os recebidos do evento onLayout de um componente <Text> com as mesmas propriedades.
Em ambas as funções, o texto a ser medido é necessário, mas o restante dos parâmetros é opcional e trabalha da mesma maneira que no React Native:
fontFamilyfontSizefontWeightfontStylefontVariant (iOS)includeFontPadding (Android)textBreakStrategy (Android)letterSpacingallowFontScalingwidth : Restrições para o intervalo de linha automática com base na estratégia de texto-Broak.Em Adionion, a biblioteca inclui funções para obter informações sobre as fontes visíveis para o aplicativo.
Se ele o ajudou, apoie meu trabalho com uma estrela ️ ou ko-fi.
Instalação principalmente automática do NPM
yarn add react-native-text-size
react-native link react-native-text-size Altere a diretiva compile para a implementation no bloco de dependências do arquivo Android/App/Build.grale.
Requisitos:
Para versões antes de 0,56 do React Native, use o react-native-text-size v2.1.1
Consulte a instalação manual no wiki como uma alternativa se você tiver problemas com a instalação automática.
measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName
measure ( options : TSMeasureParams ) : Promise < TSMeasureResult > Esta função mede o texto como o RN e seus resultados consistindo* com o evento Onlayout do Text . É preciso um subconjunto das propriedades usadas por <Text> para descrever as opções de fonte e Oher para usar.
Se você fornecer width , a medição aplicará o envoltório automático, além das quebras de linha explícitas.
* Pode haver inconsistentes no iOS, veja esse problema para saber mais.
Observação:
Embora essa função seja precisa e forneça informações completas, ela pode ser pesada se o texto for muito, como a que pode ser exibida em uma lista plana. Para esses casos, é melhor usar flatHeights , otimizado para o processamento em lote.
Objeto JS simples com essas propriedades (somente text é necessário):
| PROPRIEDADE | Tipo | Padrão | Notas |
|---|---|---|---|
| Texto | Corda | (Nenhum) | Este é o único parâmetro necessário e pode incluir emojis ou estar vazio, mas não deve ser null .Se essa for uma corda vazia, a width resultante será zero. |
| Fontfamily | Corda | Eu dependo | O padrão é o mesmo aplicado pelo React Native: Roboto no Android, San Francisco, no iOS. NOTA: O fabricante do dispositivo ou a ROM personalizada pode alterar a fonte padrão. |
| Peso -font | Corda | 'normal' | No Android, os intervalos de números que você não tem granularidade e '500' a '900' se torna 'ousado', mas você pode usar fontFamily de peso específico ("Sans-serif-fhin", "sans-serrif-medium", etc.). |
| Fontsize | Número | 14 | O tamanho da fonte padrão vem do RN. |
| FontStyle | Corda | 'normal' | Um de "normal" ou "itálico". |
| FontVariant | Variedade | (Nenhum) | apenas iOS |
| AllowFontScaling | Booleano | Verdadeiro | Para respeitar a configuração do usuário de fontes grandes (ou seja, use unidades SP). |
| Lettersing | Número | (Nenhum) | Espaçamento adicional entre os caracteres (também conhecido como tracking ).NOTA: No iOS, um zero cancela o kerning automático. Todo iOS, Android com API 21+ |
| Incluafontpadding | Booleano | Verdadeiro | O preenchimento superior e inferior da adição, para evitar recortar certos personagens. Apenas Android |
| Textbreakstrategy | Corda | 'Highqualy' | Um dos 'simples', 'equilibrados' ou 'highqualy'. Somente Android, com API 23+ |
| Largura | Número | Max_int | Restringir a largura. A altura do resultado variará dependendo do fluxo automático do texto. |
| UsePreciseWidth | Booleano | falso | Se true , o resultado incluirá uma width exata e a propriedade lastLineWidth .Você pode ver o efeito desse sinalizador no aplicativo de amostra. |
| LineInfoforline | Número | (Nenhum) | Se >=0 , o resultado incluirá a propriedade LineInfo com informações para o número da linha necessário. |
O aplicativo de amostra mostra interativamente o efeito desses parâmetros na tela.
measure retorna uma promessa que resolve um objeto JS com essas propriedades:
| PROPRIEDADE | Tipo | Notas |
|---|---|---|
| Largura | Número | Largura total usada. Pode ser LES ou igual à opção width .No Android, esse valor pode variar dependendo do sinalizador usePreciseWidth . |
| Altura | Número | A altura total, incluindo preenchimento superior e inferior, se includingFontPadding foi definido (o padrão). |
| LastLineWidth | Número | Largura da última linha, sem espaços em branco. Se usePreciseWidth for false (o padrão), esta propriedade será indefinida. |
| LineCount | Número | Número de linhas, levando em consideração quebras de linha dura e automática. |
| LineInfo | Objeto | Informações de linha. Se a opção lineInfoForLine não for fornecida, esta propriedade será indefinida. |
Se o valor do lineInfoForLine for Greelter ou Igual lineCount , essa informação será para a última linha (ou seja, lineCount - 1).
| PROPRIEDADE | Tipo | Notas |
|---|---|---|
| LINHA | Número | Número da linha dessas informações, base 0. Pode ser menor que a linha lineInfoForLine . |
| Começar | Número | Deslocamento de texto do início desta linha. |
| fim | Número | O deslocamento do texto após o último caractere visível (para que o espaço em branco não seja contado) nessa linha. |
| Fundo | Número | A posição vertical da parte inferior desta linha, incluindo estofamento. |
| Largura | Número | Exte horizontal dessa linha, incluindo o líder da margem, mas excluindo o espaço em branco à direita. Use usePreciseWidth:true para obter um valor preciso para esta propriedade. |
Em caso de erro, a promessa é rejeitada com um objeto estendido com um dos seguintes códigos de erro, como uma string literal:
| Código | Detalhes |
|---|---|
| E_missing_parameters | measure requer um objeto com os parâmetros, que não foram fornecidos. |
| E_missing_text | O texto a ser medido é null ou não foi fornecido. |
| E_invalid_font_spec | A especificação da fonte não é válida. É improvável que isso aconteça no Android. |
| E_unknown_error | Bem ... quem sabe? |
//...
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 [ ] >Calcule a altura de cada uma das cordas em uma matriz.
Esta é uma alternativa para measure designado para casos em que você calcula a altura de blocos de texto numerosos com características comuns (largura, fonte, etc.), caso de uso típico com componentes de <FlatList> ou <RecyclerListView> .
A medição usa o mesmo algoritmo que measure , mas retorna apenas a altura de cada bloco e, evitando várias etapas através da ponte, é mais rápido ... muito mais rápido no Android!
Fiz testes em 5.000 blocos de texto aleatórios e esses foram os resultados (MS):
measure | flatHeights | |
|---|---|---|
| Android | 49.624 | 1.091 |
| iOS | 1.949 | 732 |
No futuro, prepararei um exemplo de seu uso com os estilos FlatList e vários estilos no mesmo cartão.
Este é um objeto semelhante ao que você passa para measure , mas a opção text é uma matriz de strings e as opções usePreciseWidth e lineInfoForLine são ignoradas.
| PROPRIEDADE | Tipo | Padrão |
|---|---|---|
| Texto | Corda [] | (Nenhum) |
| Largura | Número | Infinidade |
| Fontfamily | Corda | Eu dependo |
| Peso -font | Corda | 'normal' |
| Fontsize | Número | 14 |
| FontStyle | Corda | 'normal' |
| FontVariant | Variedade | (Nenhum) |
| AllowFontScaling | Booleano | Verdadeiro |
| Lettersing | Número | (Nenhum) |
| Incluafontpadding | Booleano | Verdadeiro |
| Textbreakstrategy | Corda | 'Highqualy' |
Os resultados são uma promessa que resolve uma matriz com a altura de cada bloco (em SP ), na mesma ordem em que os blocos foram recebidos.
Diferentemente da medida, os elementos null retornam 0 sem erro de geração, e as seqüências vazias retornam a mesma altura que o RN atribui aos componentes 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 ( ) : Promise < { [ key : string ] : TSFontForStyle } >Obtenha informações da fonte do sistema para o sistema operacional em execução.
Este é um invólucro para o UIFont.preferredFontForTextStyle Oros
O resultado é uma promessa que resolve para um objeto JS que as teclas dependem do sistema operacional, mas os valores são, por sua vez, objetos totalmente compatíveis com os estilos RN, para que possa ser usado para estilizar <Text> ou <TextInput> componentes:
| PROPRIEDADE | Tipo | Notas |
|---|---|---|
| Fontfamily | Corda | Nome da família do sistema ou rosto de fonte. |
| Fontsize | Número | Tamanho da fonte em SP (não escalado). |
| FontStyle | Tsfontstyle | Somente se 'itálico', indefinido se o estilo for 'normal'. |
| Peso -font | TsfontWeight | Somente se 'ousado', indefinido se o peso for 'normal'. |
| FontVariant | TsfontVariant [] ou nulo | apenas iOS . Atualmente, nenhum estilo inclui esta propriedade. |
| Lettersing | Número | Omitido se estiver em execução no Android com RN Loower que 0,55 |
Para conhecer os nomes, consulte as chaves do SpecSfortTtyles no wiki.
Eu não tentei normalizar as chaves do resultado Becouse, com exceção de dois ou três, eles têm uma interpretação diferente em cada sistema operacional, mas você pode usá -las para criar estilos alfandegários de acordo com suas necessidades.
fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >Retorna as características da fonte obtidas das especificações fornecidas.
Este parâmetro é um subconjunto de TSMeasureParams , portanto os detalhes são omitidos aqui.
| PROPRIEDADE | Tipo | Padrão |
|---|---|---|
| Fontfamily | Corda | iOS: 'San Francisco', Android: 'Roboto' |
| Peso -font | Corda | 'normal' |
| Fontsize | Número | 14 |
| FontStyle | Corda | 'normal' |
| FontVariant | Corda [] | (Nenhum) |
| Lettersing | Número | 0 |
fontFromSpecs usa um implícito allowsFontScaling:true e, como essa não é uma função de medição, includeFontPadding você não tem significado.
Os resultados são uma promessa que resolve um objeto JS com informações para a fonte e o tamanho fornecidos, unidades no SP no Android ou pontos no iOS, usando números de ponto flutuante onde aplicável*.
| PROPRIEDADE | Tipo | Detalhes |
|---|---|---|
| Fontfamily | Corda | No Android, é a mesma string passada que o parâmetro. |
| Fontname | Corda | Somente iOS , sempre undefined no Android. |
| Fontsize | Número | Pode ser diferente do parâmetro fornecido se o parâmetro incluir decimais. |
| FontStyle | Corda | 'Normal' ou 'itálico'. |
| Peso -font | Corda | 'Normal' ou 'Bold', no iOS pode ir de '100' a '900'. |
| FontVariant | Corda [] | Somente iOS , sempre undefined no Android. |
| subir | Número | A distância recomendada acima da linha de base para o texto espaçado. |
| descer | Número | A distância recomendada abaixo da linha de base para o texto espaçado. |
| CapHeight | Número | IOS Somente altura dos caracteres de capital. |
| Xheight | Número | IOS apenas altura da minúscula "X". |
| principal | Número | Apenas Android . Distância máxima acima da linha de base para o glifo Tallles na fonte. |
| Fundo | Número | Apenas Android . Distância máxima abaixo da linha de base para o glifo mais baixo da fonte. |
| Principal | Número | O espaço adicional recomendado para adicionar entre linhas de texto. |
| LineHeight | Número | A altura da linha recomendada. Deve ser maior se o texto contiver símbolos unicode, como emojis. |
| _Hash | Número | Código de hash, pode ser útil para depuração. |
* O uso de flutuadores é mais preciso que os números inteiros e permite que você use seu método de arredondamento preferencial, mas não mais que 5 dígitos de precisão nesses valores. Além disso, lembre -se de que o RN não funciona com subpixels no Android e truncará esses valores.
Veja mais em:
Entendendo a tipografia no site do Google Material Design.
Sobre o manuseio de texto no iOS para iOS.
fontFamilyNames ( ) : Promise < string [ ] >Retorna uma promessa para uma variedade de nomes de família de fontes disponíveis no sistema.
No iOS, você usa o método UIFont.familyNames do uikit.
No Android, o resultado é codificado para as fontes do sistema e complementa dinamicamente as fontes instaladas pelo seu aplicativo, se houver.
Veja sobre fontes Android e fontes personalizadas no wiki para saber mais sobre esta lista.
fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] > Wrapper para o método UIFont.fontNamesForFamilyName de Uikit, retorna uma variedade de nomes de fontes disponíveis em uma família de fontes específica.
Você pode usar a função fontFamilyNames do RNTEXTSIZE para obter uma matriz dos nomes de família da fonte disponível no sistema.
Esta é uma função apenas do iOS , no Android, ele sempre resolve null .
No iOS, a largura resultante de ambos, measure e flatHeights , inclui espaço de branco principal enquanto no Android estes são descartados.
No iOS, o RN leva em consideração a posição absoluta na tela para calcular as dimensões. O RNTEXTSSIZE não pode fazer isso e ambos, largura e altura, podem ter a diferença de até 1 pixel (não ponto).
O RN não suporta os tamanhos de tipo dinâmico, mas faz um excelente trabalho imitando esse recurso em permitir allowFontScaling ... Excepto para letterSpacing que não é escalado.
Espero que uma versão futura do RN resolva esse problema.
Embora o RNTEXTSSIZE forneça o lineHeight resultante nas funções da SUM, ele não o suporta como um parâmetro porque você usa o algoritmo não padrão para defini-lo. Eu recomendo que você não use lineHeight a menos que seja estritamente carente, mas se você o usar, tente torná -lo 30% ou mais do que o tamanho da fonte ou usar o método RNTextSize fontFromSpecs se você deseja mais precisão.
Componentes <Text> (ou com imagens dentro)
Sou desenvolvedor de pilhas completas com mais de 20 anos de experiência e tento compartilhar a maior parte do meu trabalho de graça e ajudar os outros, mas isso leva uma quantidade significativa de tempo e esforço, então, se você gosta do meu trabalho, considere ...
Claro, feedback, PRs e estrelas também são bem -vindos?
Obrigado pelo seu apoio!
A licença "simplificada" da BSD 2-cláusulas.
© 2018-2019, Alberto Martínez. Todos os direitos reservados.
