본문 바로가기

React Native

(5)
TextInput 에서 영어가 대문자로 시작할 때 autoCapitalize="none" 옵션을 넣어 대문자 자동변환을 막아주면 됨
FlatList 뒷배경 처리 라인캘린더의 상위 컴포넌트 뒷배경을 노란색으로 칠해버릴까 했는데, 그 방법 보다는 플랫리스트 내에서 처리하고 싶었음   30분 넘게 CSS 뒤젹거렸는데 결국 저거 하나면 끝남
FlingGestureHandler 사용시 발생되는 ref 에러 사이드 프로젝트에서 제스쳐핸들러 뷰의 'FlingGestureHandler' 이 필요했다. 라이브러리를 설치하고, 공식문서에 있는 초기 세팅까지 완료한 후에 인터렉션이 일어나야하는 View에 감싸줬더니뜬금없이 Ref 관련한 에러가 발생이 됐다.   정말 당황스러운건 TimeLine 컴포넌트는 에러를 내뱉으면서주석한 View 컴포넌트는 에러없이 잘 출력이 되고 있는 거.... 뭐가 문젠지 깃헙 이슈를 좀 뒤져보니 아래와 같은 말이 있어서   에러가 안남.. 이건 쫌 당황스러운데내 30분 돌려내라 ...
onChangeText의 Type은 ((text: string) => void) | undefined (e: React.ChangeEvent) => void이거 아님 주의  아이디랑 비밀번호를 받는 로그인 페이지를 만들면서 두 value 를 하나의 state로 관리하고 싶었다. inputs의 정석인 아래 코드를 적용하려고 했는데   const onChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); };  (text:string) => void 형식으로 바꿔야 한단다 name을 넘길 수 있는 방법도 없고 해서 이걸 함수로 바꿔서 해보기로 함   const onChangeText = (name: string) => (te..
React-Native / StyledComponent 에서의 disabled 처리법 boolen값을 프롭스로 내려서 제어하는 것이아니라,  css 선택자를 사용해서  disabled 스타일 내에서 처리를 하고 싶었다.  const ButtonContainer = styled.TouchableOpacity` width: 100%; height: 48px; align-items: center; justify-content: center; border-radius: 50px; flex-direction: row; position: relative; &:disabled { background-color: ${color.separateGray}; }`;  위처럼 진행하니 콘솔에 아래와 같은 오류가 발생함    응 지원안해- 라는 소리    const ButtonContainer = styled(..