React Native でのテキストラップ

Shiv Yadav 2024年2月15日

React Native React Native Flexwrap

今日のチュートリアルでは、さまざまなコード例を使用して、React Native でテキストをラップする方法を示します。

React Native でのテキストラップ

flex-wrap は React Native で wrap という単語を含む唯一のオプションであるため、試してみたいと思うかもしれません。

このようなスタイルを利用することを支持する人もいますが、その最大の欠点は、テキスト自体ではなく、テキストではなくフレックスボックスの子を壊す可能性があることです。

実際の解決策では、flex-wrap オプションが使用されましたが、テストの結果、不要であることが判明しました。 flex: 1 は、親ビューのいくつかのソリューションで使用されました。

ソフトウェアの設計に影響を与える可能性があるため、これはやりたくありませんでした。代わりに、特定の親ビューで残りの領域を埋めるようにしました。

flex: 1 を理解すると、次元が兄弟間でどのように分散されるかを知ることができます。

次のことを実行するとします。

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;

出力：

反応ネイティブでテキストをラップ - 出力 1

この状況でのデフォルトのフレックスボックスの方向は列 (または垂直) であるため、各子の高さは均等に分割され、1 + 2 + 1 = 4 になります。

真ん中の子は高さの 2/4 (または 1/2) を受け取り、最初と最後の子はそれぞれ高さの 1/4 を受け取ります。

React Native のテキストラップの問題に戻ります。テキストを分割したかったのです。フレックスボックスのレイアウト全体に影響を与えたくありませんでした。

したがって、flex: 1 を Text コンポーネントに追加し、flex-direction: row を親コンポーネントに追加する必要があります。

これはそれがどのように見えるかです：

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 は、デバイスの境界内でコンテンツをレンダリングします。

出力：

反応ネイティブでテキストをラップ - 2 を出力

上記のコードを実行すると、ネイティブデバイスでは問題なく機能しますが、Web のテキストを適切にラップできないことがわかります。これを修正するには、図のように Text コンポーネントに width: 1 を追加します。

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;

出力：

react native でテキストをラップ - 出力 3

著者： Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

React Native でのテキスト ラップ

関連記事 - React Native

React Native でのテキストラップ