글 중간에 클릭이 가능한 Text 컴포넌트는 어떤 것 쓰시나요?

질문

하려고 하는 것은 아래 이미지와 같습니다. 중간 중간 스타일도 적용하면서 특정 택스트를 클릭이 가능하도록 하고 싶은데 손쉬운 방법은 없을까요? 관련해서 경험이 있으신 분은 나눠주세요.

넋두리

타이타늄은 많이 성숙하다보니 이제는 기본 컴포넌트에서 이런 기능들을 제공되고 있어요. 그래서 이럴때마다 타이타늄 생각이 많이 납니다. :cry:
다음은 html2as라는 타이타늄용 오픈소스 모듈인데요. titanium의 Label 속성인 attributedString를 이용하지만 글자의 스타일링은 html 형태로 손쉽게 할 수 있도록 해줍니다.

onPress props는 시도해보셨나요? Text속에 Text 중첩은 가능한걸로 알고있는데 말이죠;;

1개의 좋아요

@redgoose 님 답변보고 신나서 해봤는데요. 작동이 어쩌다가 한번됩니다. :crying_cat_face:
이게 정상적으로 동작하면 참 편리할텐데 말이죠.

시뮬레이터에서도 잘 안되던가요? 방금 시도해보니 시뮬레이터에서는 잘되어보이네요. ;;
아니면 TouchableWithoutFeedback으로 싸는방법도 있는데 이것도 되네요;;; 하지만 active됐을때 포커스가 안됩니다. ㅎ;

@redgoose 덕분에 다시 해보다가 문제를 알았습니다!! text 자체에 padding을 주었을 경우가 문제가 됩니다.
예를들어 paddingTop: 20 을 주면 텍스트가 조금 아래에 표기될텐데 터치 영역은 paddingTop:0일때와 동일하게 잡혀있습니다.

한마디로 버그네요. ㅎㅎ

답변 감사합니다!

1개의 좋아요

웹과같이 inline에서 padding이 제대로 들어갈거라는 기대는 안하고 있었는데… ㅎㄷ~
멀쩡한 기능을 만들어놓고 제대로 작동안되다니 이거 미친거 아닌가 싶었네요. ㅎㅎ;; 모바일에서 인라인 텍스트를 버튼 넣는건 드문일이라서 처음에는 Text에 onPress가 없는줄 알고 삽질해서 다르게 만든 기억이 나네요 ;;;

문제가 된 상황을 단순화 시키면 아래와 같습니다.

<Text style={{paddingTop:30}}> I'm <Text onPress={()=>{ alert('wow'); }}> link </Text> !!! </Text>

내부의 Text가 padding넣을때 오작동한다면 좀 치명적이지만 바깥에서라면 다른 방법도 충분히 있으니 좀 우회해서 해결할 수 있을거 같네요.
역시 앱에서의 텍스트는 단순하게 사용해라는 교훈을 얻습니다. ㅎㄷ~

1개의 좋아요

네 괜히 view 개수 줄일 생각 말고 text는 text 역할만 :wink:

타이타늄도 attributedString 에 잔버그가 아직 있어요ㅎㅎ

그래도 기본 기능으로 된다는게 좋긴 하지만요…

저도 요새 슬슬 RN을 살펴보고 있습니다.

같이 삽을 드시죠. :pick:

제가 써본 거 중에 제일 좋은 건 이건데요. 제가 쓰려던 용도에는 딱 맞았어요.

1개의 좋아요

훌륭해 보이네요 :+1: