TIL: RN | React Router

react native 에서 react router 를 사용할 수 있다
그치만 react navigation 처럼 애니메이션을 주거나 앱에만 적용되는 편의 기능은
따로 제공하지 않는것으로 보인다
react native screens 는 따로 사용할 수 없고
어떤 패키지에 귀속되어 사용하는 것인데
react navigation 등 몇몇 라이브러리에만 적용되어 있다

이럴거면 그냥 react navigation 사용하지

그래도 굳이 사용해보고 싶다
react router v5 문서에 react native 코드에 대한 예시가 나와있고
react router v6 문서에는 native router 설정에 대한 것이 나와있다
잘 조합해서 쓰면 동작은 된다
애니메이션 예시도 주고있으니 함 써보자
https://v5.reactrouter.com/native/guides/animation

app.tsx

return (
    <NativeRouter>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <View style={styles.container}>
          <View style={styles.nav}>
            <Link to="/" underlayColor="#f0f4f7" style={styles.navItem}>
              <Text>Home</Text>
            </Link>
            <Link to="/about" underlayColor="#f0f4f7" style={styles.navItem}>
              <Text>About</Text>
            </Link>
            <Link to="/topics" underlayColor="#f0f4f7" style={styles.navItem}>
              <Text>Topics</Text>
            </Link>
          </View>
          <Routes>
            <Route exact path="/" element={<Text>home</Text>} />
            <Route path="/about" element={<Text>about</Text>} />
            <Route path="/topics" element={<Text>topics</Text>} />
          </Routes>
        </View>
      </SafeAreaView>
    </NativeRouter>
  )