react native 키패드 있을 때 버튼 함수 바로 실행하는 방법

로그인 화면에서 아이디와 비밀번호 input에 포커스가 되면 키패드가 열리는데

키패드가 열린 상태에서 로그인 버튼을 터치하면 키패드가 먼저 닫히는 동작이 돼서 

로그인 버튼을 결국 한번 더 눌러야 하는 불편함이 생긴다.

이 부분은 ScrollView로 감싸서 ScrollView의 속성인 keyboardShouldPersistTaps="handled"을 추가하면 된다.

 

그런데 또 문제는 로그인 버튼 밑의 계정찾기와 회원가입 버튼이 있다는 것 .. !

원래라면 두 버튼들도 터치 시 바로 화면 이동해도 되는데 이번 프로젝트에서는 특히 회원가입 버튼을 누르면 바로 넘기면 안됐다(는 내맘이긴 함).

왜냐하면 회원가입 화면 이동 즉시 약관동의 바텀시트가 뜨기 때문이다.

로그인 화면에서 키패드가 안 닫힌 채로 회원가입 이동하면 약간의 충돌이 나면서 바텀시트의 높이가 내가 지정한 값보다 더 높은 위치에서 멈췄다.

그래서 약관 동의 바텀시트를 setTimeOut으로 늦춰서 열리게 할지 고민을 해봤을때 억지로 setTimeOut로 낮추는건 사용자의 기기 사양에 따라 반영시간이 달라질 것 같기도 하고 로딩시간과 겹쳐서 더 사이드 이펙트를 불러올 것 같아 지양하기로 했다.

 

고민 끝에 input 영역과 footer 영역으로 나눠 각각 ScrollView로 감싸서 둘다 스크롤은 막되

전자에는 keyboardShouldPersistTaps="handled" 그대로 적용하고 후자에는 keyboardShouldPersistTaps="handled"를 적용하지 않는다.

 

의도한대로 구현 완료 ! 

   //생략
   

//로그인 영역
        <ScrollView contentContainerStyle={styles.container} scrollEnabled={false} keyboardShouldPersistTaps="handled">
          <View style={styles.card}>
            <FormInput control={control} name="loginId" label="아이디" placeholder="아이디를 입력해주세요" />
            <FormInput
              control={control}
              name="password"
              label="비밀번호"
              secureTextEntry
              placeholder="비밀번호를 입력해주세요"
            />
          </View>

          <Checkbox control={control} name="autoLogin" label="로그인 상태 유지" labelStyle={styles.checkbox} />

          <Button text="로그인" disabled={!isValid} style={styles.button} onPress={handleSubmit(login)} />
        </ScrollView>

//계정찾기 & 회원가입 이동 버튼 영역 
        <ScrollView scrollEnabled={false}>
          <View style={styles.footer}>
            <TouchableOpacity>
              <FontText variant="body1R" style={styles.linkText}>
                계정찾기
              </FontText>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => router.push("/signup")}>
              <FontText variant="body1R" style={styles.linkText}>
                회원가입
              </FontText>
            </TouchableOpacity>
          </View>
        </ScrollView>



//생략