[ 개인플젝 ] 닉네임 생성 화면 구현 기록

난 개인프로젝트로 인증앱을 작업중이다.

오늘은 닉네임생성뷰를 보이는것만 집중해서 작업했다. 서버리스로 작업할 예정이고 파이어베이스 사용 예정이다 일단 인증스크린까지 작업하고 뒷단은 이후에 생각하자

닉네임생성 스크린에서 요하는 기능

• 인풋에 값이 2글자 이상 있을경우 버튼 출력 → 슬라이드 애니메이션으로

• 인풋에 값이 없을경우 사라짐 → 슬라이드 애니메이션으로

• 인풋박스 이외의 영역을 터치하면 키보드 비활성화

• 버튼 터치시 탭화면의 홈으로 이동

1. 인풋값의 여부에 따라 버튼 슬라이드로 up/down

 const slideAnim = useRef(new Animated.Value(-62)).current;

  const animateTo = (toValue: number) => {
    Animated.timing(slideAnim, {
      toValue,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  const onChangeText = (t: string) => {
    setNickname(t);
    if (!t) {
      animateTo(-62);
    }
    if (t.length >= 2) {
      animateTo(0);
    }
  };

///...중략

<Animated.View style={{transform: [{ translateY: slideAnim }]}}>
...
</Animated.View>

slideAnim

• 버튼의 Y축 위치를 관리하는 애니메이션 값

• 초기값 -62는 화면 밖(아래)에 숨긴 상태를 의미

• useRef를 사용해 리렌더링 시에도 값이 유지되도록 한다

animateTo

• Y축 이동 애니메이션의 구현부

• duration으로 애니메이션 지속시간을 주며 자연스럼게 updown할 수 있도록 한다

• useNativeDriver 최적화 여부(그냥 갖다 박으면됨)

• start의 콜백을 넣어줄 수 있고 애니메이션이 종료되는 시점에 실행된다

onChangeText

• TextInput에 붙어서 텍스트 글자 수에 따라 에니메이션을 실행한다

2. 인풋박스 이외의 영역을 터치하면 키보드 비활성화

<KeyboardAvoidingView
      style={style.wrap}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={-140}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         {/* ...중략 */}
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>

KeyboardAvoidingView

• 키보드가 나타날 때 화면 레이아웃이 밀리거나 가려지지 않도록 보정

• iOS는 padding, Android는 height를 사용하는 것이 일반적

• keyboardVerticalOffset은 상단 헤더 등 고정 UI 높이를 고려한 미세 조정 값 (굳이 안넣어도 되는데 내 의도 보다 너무 올라갔을경우)

TouchableWithoutFeedback

• 화면의 빈 영역을 터치하면 Keyboard.dismiss() 실행

3. 버튼 터치시 탭화면의 홈으로 이동

현재 스크린 스택들을 보면 Home은 Tabs에 묶여있고 NicknameScreen은 따로 나와 있다

<Stack.Screen name="MainTabs" component={Tabs} />
<Stack.Screen name="Nickname" component={NicknameScreen} />

이 경우에는 navigate(““)여기서 바로 갈 수 없다

아래 처럼 명시해줘야함 어디의 어디로 가는지

navigation.navigate('MainTabs', {
      screen: 'Home',
    });