Ajuste de texto en React Native

El tutorial de hoy demuestra el ajuste de texto en React Native usando diferentes ejemplos de código.

Ajuste de texto en React Native

Dado que flex-wrap es la única opción en React Native que contiene la palabra wrap, es posible que desee probarlo.

Si bien algunos abogan por utilizar este estilo, su mayor inconveniente es que puede romper los elementos secundarios de Flexbox en lugar del texto, no el texto en sí.

Las soluciones prácticas emplearon la opción de envoltura flexible, aunque las pruebas revelaron que no era necesaria. flex: 1 se utilizó en algunas de las soluciones en la vista principal.

No queríamos hacer eso porque habría afectado el diseño de mi software. Entonces, en cambio, deseábamos que mi vista principal específica llenara el área restante.

Entender flex: 1 te permitirá saber cómo se distribuirá la dimensión entre sus hermanos.

Digamos que llevas a cabo lo siguiente:

import { View, Text } from "react-native";

import React from "react";

function App() {
  return (
    <>
      <View>
        <View style={{ flex: 1 }}>
          <Text>Shiv</Text>
        </View>
        <View style={{ flex: 2 }}>
          <Text>Kumar</Text>
        </View>
        <View style={{ flex: 1 }}>
          <Text>Yadav</Text>
        </View>
      </View>
    </>
  );
}

export default App;

Producción:

Dado que la orientación predeterminada de flexbox en esta situación es columna (o vertical), las alturas de cada niño se dividirán de manera uniforme, haciendo 1 + 2 + 1 = 4.

El niño del medio recibe “2/4” de la altura (o 1/2), mientras que el primero y el último niño reciben cada uno 1/4 de la altura.

Volviendo al problema de ajuste de texto de React Native. Queríamos que el texto se rompiera; no queríamos que todo el diseño de flexbox se viera afectado.

Por lo tanto, debe agregar flex: 1 al componente Texto y flex-direction: fila al componente principal.

Así es como aparece:

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';

function App() {
  return (<><SafeAreaView style = {
    {
      flex: 1, flexDirection: 'row', width: 160
    }
  }><View style = {
    {
      width: 50
    }
  }><Text>Shiv</Text>
        </View><View style = {
    {
      flexGrow: 1, flexDirection: 'row'
    }
  }><Text style = {
    {
      flex: 1
    }
  }>This is how work</Text>
        </View><View style = {
    {
      width: 50
    }
  }><Text>Yadav</Text>
        </View></SafeAreaView>
    </>);
}

export default App;

SafeAreaView representa el contenido dentro de los límites de un dispositivo.

Producción:

Si ejecuta el código anterior, observará que funciona sin problemas en los dispositivos nativos, pero no ajusta correctamente el texto para la web. Agregue ancho: 1 al componente Texto como se muestra para corregir eso.

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';

function App() {
  return (<><SafeAreaView style = {
    {
      flex: 1, flexDirection: 'row', width: 160
    }
  }><View style = {
    {
      width: 50
    }
  }><Text>Shiv</Text>
        </View><View style = {
    {
      flexGrow: 1, flexDirection: 'row'
    }
  }><Text style = {
    {
      flex: 1, width: 1
    }
  }>This is how work</Text>
        </View><View style = {
    {
      width: 50
    }
  }><Text>Yadav</Text>
        </View></SafeAreaView>
    </>);
}

export default App;

Producción: