분류 Reactjs

React 네이티브 라이브러리 5 개

컨텐츠 정보

  • 조회 275 (작성일 )

본문

React Native 개발자로서 저는 우리 모두 react-native-community의 필수 라이브러리와 React Navigation 및 Reanimated와 같은 다른 획기적인 라이브러리에 익숙하다고 생각합니다.


사실, 작은 기여자들도 있고 그들의 작업은 언급 할 가치가 있습니다. 제가 찾은 5 개의 놀라운 라이브러리를 공유하고 싶습니다.이 라이브러리가 귀하의 프로젝트에 유용 할 수 있기를 바랍니다.


1. gorhom/bottom-sheet 


이것은 지금까지 시도한 최고의 하단 시트 라이브러리입니다. reanimated-bottom-sheet의 매끄러운 애니메이션과 제스처와 react-native-scroll-bottom-sheet의 스크롤 가능 기능을 하나의 네이티브와 유사한 성능 라이브러리로 결합했습니다.


하단 시트는 웹 개발에서 오버레이 콘텐츠를 만드는 일반적인 관행을 참조하는 포털을 통해 마운트됩니다. 개념은 React Portal과 유사합니다.


또한 iOS 기본 모달 스택 동작을 모방하는 React Navigation과 통합 할 수 있습니다. 설정은 단순히 스택 탐색기를 하단 시트로 감싸는 것입니다. 맞춤 탐색기가 필요하지 않습니다. 이것은 모달 스택을 구현할 때 더 많은 창의적 자유를 열어줍니다.


Image for post 

단점은 보기 문제를 피하는 성가신 키보드입니다. 주변에 불완전한 해킹이 있으며 소유자는 Reanimated v2가 필요한 v3에서 문제를 해결하려고 합니다. 하단 시트에 입력 필드가 없을 계획이라면 공원 산책이 될 것입니다.


https://github.com/gorhom/react-native-bottom-sheet


2. react-native-notifier 


이 라이브러리는 Instagram의 인앱 알림을 상기시켜 줍니다. 제스처 핸들러와의 통합은 말할 것도 없고 깔끔한 디자인을 좋아합니다. 또한 완전히 사용자 정의 할 수 있습니다.


여러 알림을 정렬하고 전환 할 수 있는 대기열 모드도 있습니다.


기본적으로 기본 푸시 알림을 모방 할 수 있습니다. 누구나 친숙하고 직관적 인 사용자 경험을 발견해야 합니다.


https://github.com/seniv/react-native-notifier


3. react-native-render-html 


이 라이브러리는 Ionic을 생각 나게 합니다. 기본 아이디어는 HTML 태그를 해당 React Native 구성 요소에 매핑하는 것입니다. 사용자 정의 태그를 갖고 클래스에 스타일을 추가 할 수도 있습니다.


가장 큰 잠재력은 렌더링을 위해 HTML 템플릿을 React Native 앱에 제공 할 수 있는 백엔드 서비스와 페어링 하는 것입니다. 이것은 판촉 또는 면책 문서와 같은 동적 콘텐츠에 특히 유용합니다.


https://github.com/meliorence/react-native-render-html


4. react-native-haptic-feedback 


이 라이브러리는 약간의 사용자 피드백 경험을 추가합니다. 소리 나 진동과 같은 사소한 상호 작용은 앱에 "연결"된 느낌을 주는 경향이 있습니다. 이 아이디어는 게임 세계에서 깊이 사용됩니다. 게임의 음향 효과 뿐만 아니라 컨트롤러의 진동이기도 합니다.


iOS는 생태계에 햅틱 기능을 원활하게 구현했습니다 (예 : Apply Pay를 사용하거나 앱 다운로드를 확인하는 경우). 사용자 여정 중 하나에 이 기능을 추가하고 앱을 활성화하십시오.


https://github.com/junina-de/react-native-haptic-feedback


5. react-native-parsed-text 


HTML에서 태그를 인라인으로 추가하는 방법과 달리 일부 페이지에 대한 인라인 링크를 생성하려면 React Native에서 많은 노력이 필요합니다. 텍스트 내에 구성 요소를 중첩 할 수 없었습니다. 앱이 내재화를 사용하면 문제가 더욱 분명해집니다. 문장은 언어에 따라 구조가 다를 수 있습니다. 구성 요소와 텍스트를 같은 방식으로 결합 할 수 없습니다.


이 도서관은 당신의 구세주가 될 것입니다. RegExp 또는 미리 정의 된 패턴을 사용하여 개별 텍스트를 선택할 수 있습니다. 그런 다음 스타일과 핸들러를 추가 할 수 있습니다. 예를 들어 URL을 선택하고 핸들러를 추가하여 브라우저를 열 수 있습니다.


https://github.com/taskrabbit/react-native-parsed-text


결론 


React Native 라이브러리는 일반적으로 두 플랫폼의 JavaScript 및 Native 코드를 처리해야 하므로 구현하기가 비교적 놀랍습니다. 이 라이브러리의 모든 기여자에게 진심으로 감사드립니다. 그리고 그들이 당신의 앱 경험을 다음 단계로 끌어 올리는 데 도움이 되기를 바랍니다.


https://medium.com/javascript-in-plain-english/5-react-native-libraries-you-might-have-missed-16fb45d64614