[React-Native] React-Native에서 텍스트 말줄임 처리하기

웹에서는 white-space: nowrap, text-overflow: ellipsis 등으로 텍스트 말줄임 처리가 가능하지만,

리액트 네이티브에서는 이 방법이 적용되지 않는다.

리액트 네이티브에서 말줄임 처리를 하려면 리액트 네이티브가 제공하는 몇 가지 속성을 사용해서

다음과 같이 적용해야 한다.

 

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text 
        numberOfLines={1} 
        ellipsizeMode="tail"
        style={styles.text}
      >
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
        Aut, earum doloribus omnis minima quasi doloremque voluptates animi, 
        sapiente dolor rem tempore! 
        Eius cupiditate architecto ea perferendis rem omnis? Iusto, aperiam.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  text: {
    fontSize: 16,
  },
});

export default App;

 

 

1. numberOfLines: 텍스트가 표시될 최대 줄 수를 지정. 이 값을 초과하면 말줄임 처리된다.
2. ellipsizeMode: 말줄임 표시 방식을 설정한다.
    
   • 'head': 텍스트의 앞 부분을 잘라내고 "...텍스트" 형태로 표시
   • 'middle': 텍스트의 중간을 잘라내고 "텍스트...텍스트" 형태로 표시
   • 'tail': 텍스트의 뒷 부분을 잘라내고 "텍스트..." 형태로 표시
   • 'clip': 말줄임(...) 없이 텍스트를 잘라낸다. (iOS에서만 지원).

일반적으로 많이 사용하는 한 줄 표시 + 텍스트 끝부분 말줄임 처리를 적용하려면,

numberOfLines={1}과 ellipsizeMode="tail"을 함께 사용해주면 된다.