React-native-screen-util NPM

react-native-screen-util

react native 반응형 실제 디자인 크기를 적용해서 사용하는 라이브러리

첫번째로

이 라이브러리는 flutter_screenutil를 리액트 네이티브로 마이그레이션 한 코드입니다 1. flutter_screenutil 2. react-if React.Memo 기능을 추가한 버전입니다. 3. qcompare state areEqual Algorithms 4. fast-equals state areEqual Algorithms 5. zustand state library and areEqual Algorithms 6. react-if 엄청편한 라이브러이에요!!! 코드가 깔끔해지졌어요 ㅎㅎ 3항식따위!! ( 리팩토링을 했고, React.memo를 사용했으며, areEqual 알고리즘에 shallow를 넣었습니다.)

설치방법

npm install react-native-screen-util

yarn add react-native-screen-util

Comment

현재 마지막으로 올라간 버전은 안드로이드에서 100% 작동을 확인했습니다.
현재 안드로이드 버전 최소 29부터 지원됩니다 :< (이유는 inset 때문에..)
아직까지는 android만 확인해봤습니다. :>
2022/12/28 ios 14기기에서 정상작동 확인했습니다 100% !!
ios 는 최소 ios버전 이후부터 지원 됩니다. 11버전까지는 아마 안될껍니다. :<
2023/01/01 rework completely! Ver1 start
2023/01/05 패치완료! ux/ux의 디자인된 영역만 적어주세요.. (상태바, 네비게이션바 또는 하단바?)

디자인 적용 사진

디자인 파일 1. 원본 png (390 x 844) 1. 링크 2. 원본 svg (390 x 844) 1. 링크 3. ios 14 1. 링크 2. 4. android 1. 링크 2. 3.

Futures

- 마진을 조금더 쉽고 간편하게 사용하기위한 API추가
type을 지원할 예정이며, 넣은 값만 출력될 예정입니다. style에 바로 사용 가능하도록
- 패딩을 조금더 쉽고 간편하게 사용하기위한 API추가
1-1와 같음
- ios 기기 확인
- 안드로이드 기기에서 Inset값이 마지막으로 확인했을때 0으로 나왔던점을 다시한번 확인해야합니다.(프로그램이 꺼지지는 않지만, 값이 0으로 출력됩니다)
- border에는 뭘쓸지 생각중 - mixin이라는 함수를 쓰게됐습니다. 공식은 다음과 같습니다. value * ((비율넓이 + 비율높이) / 2)
- npm, yarn 업로드 아마도 23년1월1일 ?
- context, provider 추가 react에 대해 자세히 아는게 아니라 생명주기 등등 조사가 많이 필요했었네요 ㅋㅋ.. store가 react life cycle을 쓰고있었다니...
- responseiveApi에 대한 areEqual 알고리즘을 변경 할 수 있는 context 및 provider를 추가했습니다.
- react-if를 추가했습니다. 단, 재랜더링에 대해 방책이 없었고, pureComponent도 아니여서 React.memo를 사용하여 리팩토링 했습니다.
1. 사용방법은 react-if와 완전히 같습니다
- react-native의 StyleSheet와 똑같은 클래스형 함수를 만들었습니다.
- 숫자만 적으면 자동으로 변환됩니다.
- 단, width, height, fontSize, padding, margin만 적용됩니다.
- style코드는 자동으로 Object.freeze로 만듭니다.
- ResponsiveStore(zustand)에서 사용하는 areEqual을 변경할 수 있는 context를 추가했습니다.
- object.is
- shallow
- fasteEquals(shallow)
- fasteEquals(deep)
- qcompare