Textumbruch in React Native

Das heutige Tutorial demonstriert das Umbrechen von Text in React Native anhand verschiedener Codebeispiele.

Textumbruch in React Native

Da Flex-Wrap die einzige Option in React Native ist, die das Wort wrap enthält, könnten Sie geneigt sein, es auszuprobieren.

Während einige die Verwendung eines solchen Stils befürworten, besteht der größte Nachteil darin, dass Flexbox-Kinder anstelle von Text und nicht der Text selbst beschädigt werden können.

Die praktischen Lösungen verwendeten die Flex-Wrap-Option, obwohl Tests ergaben, dass dies unnötig war. flex: 1 wurde in einigen Lösungen in der übergeordneten Ansicht verwendet.

Das wollten wir nicht, da es das Design meiner Software beeinflusst hätte. Stattdessen wollten wir, dass meine spezifische übergeordnete Ansicht den verbleibenden Bereich ausfüllt.

Wenn Sie flex: 1 verstehen, wissen Sie, wie die Dimension auf ihre Geschwister verteilt wird.

Angenommen, Sie führen Folgendes aus:

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;

Ausgang:

Da die standardmäßige Flexbox-Ausrichtung in dieser Situation spaltenförmig (oder vertikal) ist, werden die Höhen jedes untergeordneten Elements gleichmäßig geteilt, wodurch 1 + 2 + 1 = 4 entsteht.

Das mittlere Kind erhält 2/4 der Körpergrösse (bzw. 1/2), das erste und letzte Kind jeweils 1/4 der Körpergrösse.

Zurück zum Textumbruchproblem von React Native. Wir wollten, dass der Text bricht; Wir wollten nicht, dass das gesamte Flexbox-Layout betroffen ist.

Daher müssen Sie der Komponente Text flex: 1 und der übergeordneten Komponente flex-direction: row hinzufügen.

So erscheint es:

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 rendert den Inhalt innerhalb der Grenzen eines Geräts.

Ausgang:

Wenn Sie den obigen Code ausführen, werden Sie feststellen, dass er auf nativen Geräten einwandfrei funktioniert, aber den Text für das Web nicht richtig umschließt. Fügen Sie der Komponente Text wie gezeigt Breite: 1 hinzu, um dies zu korrigieren.

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;

Ausgang: