[RN][Expo] SyncSchedule 개발 도움 Document 정리
개발
React Native
Expo
TypeScript
Expo Router
* navigation 방법
- <Link href="/..." /> : 컴포넌트를 통한 navigation
- router.push("/...") : 이벤트 발생시 navigation
https://docs.expo.dev/routing/navigating-pages/
Navigate between pages
Create links to move between pages.
docs.expo.dev
https://www.youtube.com/watch?v=yyGS0adZdsU&list=LL&index=8&t=5351s
* params 전달 방법
- useGlobalSearchParams()
- useLocalSearchParams()
https://docs.expo.dev/router/reference/hooks/
Hooks API
Learn how to interact with the in-app URL in Expo Router.
docs.expo.dev
* header Option 설정
https://expo.github.io/router/docs/migration/react-navigation/screen/
Screen | Expo Router
Qualified layouts, like the ones found in expo-router (Stack, Tabs, Navigator) have a static Screen component which can be used to configure the behavior of a route declaratively.
expo.github.io
반응형 디자인 적용
react-native-responsive-dimensions 사용
https://jiny-dongle.tistory.com/41
[React Native] 10. 반응형 디자인 적용하기
1. 반응형 디자인의 필요성 앱의 특성상, 앱을 사용하는 기기의 디스플레이 크기가 천차만별이니 component 등의 사이즈를 해당 크기에 맞게 정해줄 필요가 있다. 본인은 디자이너와의 협업을 위해
jiny-dongle.tistory.com
Android에서 text 여백 발생 문제
includeFontPadding: false
React Native Android Text Component extra padding
I was wondering why am getting these weird padding on my Text in react-native. I tried every thing to just get a perfect text but nothing seems to work the only thing that worked was paddingVertica...
stackoverflow.com
Recoil 적용 시 <RecoilRoot /> 적용 위치 및 SafeAreaView 적용
// app/_layout.tsx
export default () => {
return (
<RecoilRoot>
<SafeAreaView style={styles.container}>
<Stack screenOptions={{ headerShown: false }} />
</SafeAreaView>
</RecoilRoot>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS == "android" ? rh(45) : 0,
paddingBottom: Platform.OS == "android" ? rh(15) : 0
}
})처음 client file은 app/_layout.
Install Expo Router
Learn how to quickly get started by creating a new project with Expo Router or add the library to an existing project.
docs.expo.dev
모듈 오류
@react-native-clipboard/clipboard
네이티브 모듈이라 에러남 => expo-clipboard 사용