HOWTO · React Native
React Native でのテキスト ラップ
この記事は、反応ネイティブでのテキスト ラップを理解するのに役立ちます。
このページの内容
今日のチュートリアルでは、さまざまなコード例を使用して、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 + 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 は、デバイスの境界内でコンテンツをレンダリングします。
出力：
上記のコードを実行すると、ネイティブ デバイスでは問題なく機能しますが、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;
出力：
