react native keyboard area 다운로드 - react native keyboard area 소스코드 다운로드

react native keyboard area

AI 소스 코드

1.0.5

다운로드

반응 네이티브 키보드 영역

이 라이브러리는 다음 문제를 해결합니다.

windowSoftInputMode를 adjustNothing 으로 설정하면 React Native Keyboard 이벤트인 keyboardDidHide 및 keyboardDidShow 가 작동을 중지합니다(문제 #2852 참조).
키보드가 나타나면 전체 앱 콘텐츠가 위로 이동합니다 (iOS 및 Android).
키보드를 닫고 일부 작업을 표시할 때 하단 텍스트 입력을 동일한 위치에 유지해야 하는 채팅 애플리케이션의 경우 전환이 그렇게 원활하지 않습니다.

시작하기

$ yarn add react-native-keyboard-area

React Native > 0.60을 사용하는 것이 좋습니다. 자동 링크를 통해 iOS 및 Android용 라이브러리 네이티브 RNKeyboard 모듈이 설치됩니다.

소개

iOS: React Native는 KeyboardAvoidingView 라는 구성 요소를 제공하고, 이를 사용하여 페이지를 감싸면 키보드가 나타날 때 콘텐츠가 위로 이동합니다.
Android: 기본적으로 AndroidManifest.xml 에는 windowSoftInputMode가 adjustResize 로 설정되어 있으며 키보드가 나타날 때 전체 앱 콘텐츠가 위로 이동하므로 KeyboardAvoidingView 구성 요소가 필요하지 않습니다.

두 가지 방법 모두 전체 페이지 내용이 위나 아래로 이동한 다음 키보드가 나타나거나 사라집니다.

그러나 때때로 위로 이동하기 위해 전체 앱이 필요하지 않을 때도 있습니다. 가장 일반적인 예는 채팅 애플리케이션이며, 키보드가 사라질 때 사용자 정의 보기 로 전환하고 싶을 수도 있습니다.

여기 이 도서관이 옵니다

이 라이브러리는 래퍼 구성 요소인 KeyboardArea 생성하여 문제를 해결합니다 . 이 구성 요소는 높이를 조정한 다음 키보드가 나타나거나 사라집니다.

또한 isOpen 소품이나 노출된 open() 및 close() 메서드를 사용하여 상태를 제어하는 것도 가능합니다.

또 다른 이점은 기본 보기의 크기가 변경되지 않기 때문에 키보드가 나타날 때 ReactNaive가 전체 앱을 다시 칠하지 않는다는 것입니다.

실제 사례: 이전과 이후


이전 : ReactNative KeyboardAvoidingView 및 adjustResize를 사용하면 결과가 별로 좋지 않고 전환 후 키보드가 사라지면 페이지가 "점프"합니다.	이후 : 이 라이브러리를 사용하면 전체 보기가 이동하지 않으며 입력 아래 키보드 영역은 전환 중에 동일한 높이를 유지합니다.

어떻게 작동하나요?

이 라이브러리에는 키보드 높이가 변경될 때 KeyboardSizeChanges 라는 이벤트를 통해 KeyboardArea 구성 요소에 알리는 일부 iOS 및 Android 네이티브 코드가 있습니다.

iOS에서는 UIResponder 및keyboardWillHideNotification을 사용하여 현재 높이로 이벤트를 발생시킵니다.
Android에서는 키보드가 전체 뷰 위로 이동하는 것을 방지하기 위해 windowSoftInputMode를 adjustNothing 으로 설정해야 합니다. 그런 다음 보이지 않는 PopupWindow 를 생성하여 레이아웃 변경을 수신하고 키보드 높이를 측정합니다.

용법

대부분의 로직은 KeyboardArea 구성 요소 내부에 있습니다. 키보드가 사라질 때 표시하려는 콘텐츠를 래핑한 다음 다음 예의 경우 ChatActionsInput 구성 요소를 표시해야 할 때 isOpen 소품을 설정하면 됩니다.

** 위 스크린샷을 단순화한 버전입니다 **

 import { KeyboardArea , KeyboardAreaRef } from 'react-native-keyboard-area' ;

/// ...
keyboardSpacerRef = createRef < KeyboardSpacerRef > ( ) ;

handleUserClick = ( ) => {
    this . keyboardSpacerRef . current ?. close ( ) ;
}

handleChangeMode = ( ) => {
    this . setState ( prev => ( {
      inputMode :
        prev . inputMode === ChatInputModes . Actions
          ? ChatInputModes . Text
          : ChatInputModes . Actions ,
    } ) ) ;
}

keyboardAreaHeightChanged = ( isOpen : boolean , currentHeight : number ) => {
  // Your logic
} ;

render ( ) {

    return (
        < PageContent >
            < ChatMessageList />
            < ChatTextInput onChangeMode = { this . handleChangeMode } />
            < KeyboardSpacer
                ref = { this . keyboardSpacerRef }
                isOpen = { inputMode === ChatInputModes . Actions }
                onChange = { this . keyboardAreaHeightChanged }
            >
                < ChatActionsInput />
            </ KeyboardSpacer >
        </ PageContent >
    ) ;
}

안드로이드 노트

Android에서는 다른 페이지에 adjustResize를 사용하려고 할 수 있으므로 이 라이브러리 setWindowSoftInputMode 사용하여 필요한 페이지에 대해서만 SoftInput 모드를 동적으로 변경할 수 있습니다. 예를 들면 다음과 같습니다.

 import { RNKeyboard , SoftInputMode } from 'react-native-keyboard-area' ;

// Example with react-navigation page focus/blur events

componentDidMount ( ) {
  navigation . addListener ( 'blur' , this . componentDidExit ) ;
  navigation . addListener ( 'focus' , this . componentDidEnter ) ;
}

componentDidEnter = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_NOTHING , ) ;
  }
} ;

componentDidExit = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_RESIZE ) ;
  }
} ;

componentWillUnmount ( ) {
  navigation . removeListener ( 'blur' , this . componentDidExit ) ;
  navigation . removeListener ( 'focus' , this . componentDidEnter ) ;
}