react-native - react native keyboardavoidingview example




키보드가 열려있을 때보기를 스크롤합니다(React Native/Expo). (2)

내 엑스포 앱에서 KeyboardAvoidingView를 사용하는 데 어려움을 겪고 있습니다. 다음 요구 사항을 충족시키고 싶습니다.

  • 키보드가 열리면 사용자가 항상 입력을 볼 수 있도록보기가 위로 스크롤되어야합니다. 그것이 KeyboardAvoidingView의 목적입니다.
  • 사용자는 키보드가 열려있을 때 전체 보기를 스크롤 할 수 있어야합니다.
  • 기괴한 그래픽 결함이 없어야합니다.
  • iOS 및 Android에서 작동해야합니다.

100 가지 솔루션을 시도했지만 만족스러운 결과를 얻을 수 없었습니다. Expo를 사용할 때 AndroidManifest를 변경하는 데 필요한 https://github.com/APSL/react-native-keyboard-aware-scroll-view 를 사용할 수 없었습니다.

KeyboardAvoidingView를 사용하여 가장 좋은 해결책은 iOS에 동작 = "패딩"을 넣는 것이고, Android에서는 전혀 동작을하지 않는 것입니다. 그러나 여전히 문제가 있습니다 : 키보드를 열면 사용자가 스크롤 할 수있는 공간이 제한됩니다. 따라서보기가 입력이 많은 긴 양식 인 경우 사용자는 키보드를 닫고 스크롤 한 다음 키보드를 다시 열지 않고 양식의 맨 아래로 이동할 수 없습니다.

또한 포커스가있는 입력 바로 다음에 키보드가 열리는 문제가 있지만 입력에 여백이 있기 때문에 추가 공간을두고 싶습니다. keyboardVerticalOffset 속성을 사용하면 아무 효과가 없습니다.

주제에 관한 수십 개의 게시물을 읽은 후에는 아무도 KeyboardAvoidingView가 작동하는 방법과이를 효과적으로 사용하는 방법을 실제로 이해하지 못하는 것 같습니다. 공식 React Native 문서에서도 "Android와 iOS는 모두이 소품과 다른 방식으로 상호 작용합니다. Android는 행동 소품이 전혀 주어지지 않을 때 더 잘 작동 할 수 있지만 iOS는 반대입니다"라고 말합니다. 이 재산이 정말로 무엇인지 이해하지 못합니다.

KeyboardAvoidingView를 사용하는 방법을 이해하고 4 가지 요구 사항이 충족되도록 사용하는 방법을 알고있는 사람이 있습니까?

당신의 도움에 미리 감사드립니다!


우리는 이것을 사용하고있다.

<KeyboardAwareScrollView  keyboardShouldPersistTaps={'always'}
        style={{flex:1}}
        showsVerticalScrollIndicator={false}>
    {/* Your code goes here*/}
</KeyboardAwareScrollView>

우리는 네 가지 문제 중 하나도 직면하지 않았습니다.


react-native-keyboard-spacer 에서 KeyboardSpacer를 시도해 보셨습니까? 반응 네이티브 요소와 함께 사용하면 완벽하게 작동합니다! 조심해야 할 것은 스크롤 뷰를 사용하려는 경우뿐입니다. 그냥 밖에서 배치해야합니다!