무작위로 반복되는 키보드 문제를 해결한 후의 생각(ReactNative)

이 글은 무작위로 발생하는 키보드 문제를 해결한 후의 생각을 공유합니다. 관심 있는 친구들이 한 번 살펴보세요.

최근 모바일 단말기에서 버그를 수정하는 데 거의 일주일이 걸렸습니다. 매우 큰 문제입니다. 아마도 이와 같은 흥미로운 버그일 것입니다. 비교적 긴 이야기이므로 관심이 있으시면 계속 읽으셔도 됩니다.

이게 무슨 버그인가요

오랜 시간 사용 후 태블릿 애플리케이션에 버그가 나타납니다 먼저 입력란에 내용을 입력한 후 완료/검색을 클릭합니다. 그런 다음 페이지의 빈 영역을 클릭하면 소프트 키보드가 나타나고 커서 포커스는 최근에 를 입력한 입력 상자에 있습니다.

이때 사용자 행동에 대한 애플리케이션의 반응은 사용자를 혼란스럽고 혼란스럽게 만들 것입니다.
요약하면 다음과 같은 특징이 있습니다

• 애플리케이션은 처음에는 정상이나 매번 재현이 되지 않습니다

• 이 버그가 발생하면 입력란이 있는 모든 페이지에서 이 문제가 발생하게 됩니다

• 반복되는 장면은 현재 알 수 없습니다. 앱을 오래 사용할수록 앱이 백그라운드에서 종료되거나 다시 시작되면 다시 사라질 가능성이 높은 것으로 알려져 있습니다.

이 버그를 수정하는 방법

첫 번째 단계는 다시 안정화하는 것입니다.

먼저 이 버그를 재현하기 위한 최소한의 사용자 여정을 찾으려고 노력했고 당시에는 운이 좋아서 찾는데 반나절 정도를 보냈습니다. 가장 작은 사용자 여정을 재현합니다.

사업 배경에 대한 이야기는 생략하고, 애플리케이션의 페이지 로직을 간단히 소개하겠습니다.
저희 애플리케이션에는 로그인 후 홈 페이지가 있습니다. 홈 페이지에는 슬라이드하거나 클릭하여 전환할 수 있는 세 개의 탭이 있습니다. 탭 페이지에는 기능 메뉴 중 하나를 클릭하여 이동할 수도 있습니다. 다른 새 밴드로 이동합니다. 입력 상자가 있는 페이지입니다.
페이지는 대략 다음과 같습니다. 전문적인 UX가 아니더라도 보기에 좋지 않더라도 화내지 마세요.

빠르게 재현할 수 있는 경로는

• 로그인 후 홈페이지 접속 후 3개의 탭을 여러 번(20회 이상) 반복적으로 전환합니다.

• 메뉴A를 클릭하면 해당 경로로 이동합니다. 입력 상자 페이지에서

• 입력 상자에 데이터를 입력하고 소프트 키보드

• 페이지의 빈 영역을 클릭

하면 소프트 키보드가 나옵니다.

두 번째 단계는 최소 시나리오에서 문제가 발생하는 이유를 코드 부분에서 알아내는 것입니다.

최소 재생 경로를 찾은 후 문제가 발생하는 이유를 코드에서 찾을 수 있습니다.
애플리케이션을 다시 시작해도 이 버그가 사라지지 않기 때문에 우리는 렌더링 문제에 대해 의심을 품고 있는데, 이는 대부분 구성 요소로 인해 발생할 수 있습니다.
저희 중에도 추측이 몇 가지 있습니다

• 자체적으로 캡슐화한 입력 컴포넌트에 문제가 있습니다

• 3개의 탭 중 슬라이딩 컴포넌트에 문제가 있습니다. 슬라이딩 컴포넌트의 스크롤 뷰가 제스처에 영향을 미칩니다. RN

드디어 알게 된 사실은 아닌 것 같습니다. 이때 그룹 내 다른 동료와 짝을 이루게 되었는데, 그녀는 문제가 많을 때 문제가 발생하기 쉽다는 것을 알게 되었습니다. 그녀는 또한 그것이 네트워크 요청 처리로 인해 발생했다고 의심했습니다. 이 의심은 사실 완전히 옳지는 않지만 우리에게 길을 찾아줍니다.

마침내 모든 네트워크 요청에는 요청 결과가 반환되기 전에 페이지에 웹의 스피너(RN의 ActivityIndicator)와 유사한 로딩 프롬프트 기호와 마스크 레이어가 있다는 것을 발견했습니다. 이 부분은 페이지 렌더링에 영향을 미칩니다. .
이 부분을 제거하면(요청이 도착하기 전에 마스킹 레이어가 나타나지 않음) 이 버그는 사라질 것입니다. 이 발견은 그 당시에도 여전히 충격적이고 혼란스러웠습니다. 원인의 일부가 발견된 것처럼 보였지만 여전히 파악하지 못했기 때문입니다. 왜인지.

세 번째 단계는 수리를 시도하는 것입니다(근본 원인을 밝히지 않고)

이런 생각을 염두에 두고 수리를 시도합니다. 비즈니스 요구에 따라 ActivityIndicator 사용을 취소할 수 없습니다. 사용자에게 적절한 프롬프트를 제공하는 것이 꼭 필요하기 때문입니다.

마스크 구현을 수정하려고 했습니다. 이전 버전에서는 로드 프롬프트 기호를 표시하기 위해 루트 수준에 형제 요소를 삽입하는 데 도움이 되는 타사 RN 구성 요소인 React-native-root-siblings를 사용했습니다.

일반적으로 요청을 보낸 후 요청 결과가 도착하기 전에 새 형제 요소를 삽입하고 요청이 완료된 후 삭제합니다. 당시 이 부분은 페이지의 요소 구조를 반복적으로 수정했기 때문에 신규 삭제 로직을 신규 업데이트 로직으로 대체해 요소 수정을 줄인 것이 아니냐는 의혹이 제기됐다. 업데이트할 때 ActivityIndicator가 표시되지 않도록 막으려는 노력이 숨겨져 있는 것 같습니다.

4단계: 버그 재현 가능 여부 테스트

페이지 요소의 반복 삭제 및 생성을 줄여 이 버그를 수정하려고 합니다. 결과는 무엇인가요?
너무 마법같아서 재현이 어렵습니다만, 아직 이유는 모르겠습니다.
나중에 QA에서 실제 기기에서 여러 번 마주쳤다고 해서 더욱 의아한 점은 실제로 발생 확률이 낮아졌는데 왜 아직도 나타나는 걸까요?

5단계: 버그의 근본 원인 분석

이제 우리는 버그의 실제 원인을 이해해야 합니다.
이 버그의 성능으로 돌아가 보겠습니다. 빈 영역을 클릭하면 TextInput의 포커스 메서드가 트리거되는 이유는 무엇입니까? 우리는 이와 같은 몇 가지를 시도했습니다.

• TextInput의 포커스가 트리거될 위치를 알아보세요

코드 로직에서 소량의 바인딩 참조에 더해 .focus 메서드를 트리거합니다(소량으로만 발생하기 때문에 버그가 발생하면 모든 입력이 차단됩니다.) 영향을 받는 시나리오, 빠른 제거는 이유의 일부가 아닙니다. RN에서 제공하는 TextInput 구성 요소에 포커스 메서드가 호출되는 위치도 많이 있음을 발견했습니다.

위 내용은 무작위로 반복되는 키보드 문제를 해결한 후의 생각(ReactNative)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!