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;일반적으로 많이 사용하는 한 줄 표시 + 텍스트 끝부분 말줄임 처리를 적용하려면,
numberOfLines={1}과 ellipsizeMode="tail"을 함께 사용해주면 된다.