React 네이티브 라이브러리 5 개
본문
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과 통합 할 수 있습니다. 설정은 단순히 스택 탐색기를 하단 시트로 감싸는 것입니다. 맞춤 탐색기가 필요하지 않습니다. 이것은 모달 스택을 구현할 때 더 많은 창의적 자유를 열어줍니다.
단점은 보기 문제를 피하는 성가신 키보드입니다. 주변에 불완전한 해킹이 있으며 소유자는 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 코드를 처리해야 하므로 구현하기가 비교적 놀랍습니다. 이 라이브러리의 모든 기여자에게 진심으로 감사드립니다. 그리고 그들이 당신의 앱 경험을 다음 단계로 끌어 올리는 데 도움이 되기를 바랍니다.
- 이전글golden-layout : 웹앱을 위한 다중 화면 레이아웃 관리자 21.02.13
- 다음글노드 백엔드로 React 앱을 만드는 방법 : 전체 가이드 21.02.06