HOWTO · React Native
React Native의 텍스트 줄 바꿈
이 문서는 반응 네이티브의 텍스트 줄 바꿈을 이해하는 데 도움이 됩니다.
이 페이지의 내용
오늘의 튜토리얼은 다양한 코드 예제를 사용하여 React Native에서 줄 바꿈 텍스트를 보여줍니다.
React Native의 텍스트 줄 바꿈
flex-wrap은 wrap이라는 단어를 포함하는 React Native의 유일한 옵션이므로 시도해 볼 수 있습니다.
이러한 스타일을 사용하는 것을 옹호하는 사람들이 있지만 가장 큰 단점은 텍스트 자체가 아니라 텍스트가 아니라 flexbox 자식을 깨뜨릴 수 있다는 것입니다.
실용적인 솔루션은 플렉스 랩 옵션을 사용했지만 테스트 결과 불필요한 것으로 나타났습니다. 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;
출력:
이 상황에서 기본 flexbox 방향은 열(또는 세로)이므로 각 자식의 높이는 균등하게 나누어 1 + 2 + 1 = 4가 됩니다.
가운데 아이는 키의 “2/4”(또는 1/2)를 받고 첫 번째와 마지막 아이는 각각 키의 1/4을 받습니다.
React Native 텍스트 줄 바꿈 문제로 돌아갑니다. 우리는 텍스트가 깨지기를 원했습니다. 우리는 전체 flexbox 레이아웃이 영향을 받는 것을 원하지 않았습니다.
따라서 Text 구성 요소에 flex: 1을 추가하고 상위 구성 요소에 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’는 장치 경계 내에서 콘텐츠를 렌더링합니다.
출력:
위의 코드를 실행하면 기본 장치에서는 완벽하게 작동하지만 웹용 텍스트를 제대로 래핑하지 못하는 것을 관찰할 수 있습니다. 이를 수정하기 위해 표시된 대로 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;
출력:
