[ReactNative] 아코디언메뉴/더보기버튼 만들기

라이브러리를 사용한 방법 위주로 검색돼서 useState로 구현해봄(가라주의)

1. 길어질 경우 생략할 Text에 numberOfLines={2} ellipsizeMode="tail”과 같이 속성을 추가함. 이 경우 최대 2줄만 보이고, 이후 내용은 ‘...’으로 표시됨.

<Text style={styles.titleBoxContent} numberOfLines={line} ellipsizeMode="tail"> 
  아코디언아코디언아코디언아코디언아코디언아코디언아코디언아코디언아코디언아코디언아코디언아코디언
</Text>

2. numberOfLines 에 들어갈 변수와 클릭여부를 state로 관리하고, Text가 클릭되면 setState.

const [line, setLine] = useState(2);
const [isActivated, setIsActivated] = useState(false);

const handleLine = () => {
    isActivated ? setLine(2) : setLine(Number.MAX_SAFE_INTEGER);
    setIsActivated(prev => !prev);
  }

return (

  ...

  <Text style={styles.titleBoxContent} numberOfLines={line} ellipsizeMode="tail" onPress={()=>handleLine()}> 
    {menuItem.description}
  </Text>

	...
  
);