[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

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

 

* header Option 설정

https://expo.github.io/router/docs/migration/react-navigation/screen/

Screen | Expo Router

 

 

반응형 디자인 적용

react-native-responsive-dimensions 사용

https://jiny-dongle.tistory.com/41

[React Native] 10. 반응형 디자인 적용하기

 

 

Android에서 text 여백 발생 문제

includeFontPadding: false

https://stackoverflow.com/questions/41525842/react-native-android-text-component-extra-padding/56201357#56201357

React Native Android Text Component extra padding

 

 

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

 

 

 

모듈 오류

@react-native-clipboard/clipboard

네이티브 모듈이라 에러남 =>  expo-clipboard 사용