๊ฐœ๋ฐœ/React-Native

[React Native] React Nativgation ์ ์šฉํ•˜๊ธฐ - 2

๋ฐ(Ming) ๐Ÿˆ‍โฌ› 2022. 3. 16. 00:36
728x90
๋ฐ˜์‘ํ˜•

 

 

[React Native] React Nativgation ์ ์šฉํ•˜๊ธฐ - 1

react native cli๋กœ ๋นŒ๋“œํ•ด์„œ expo๋กœ install์„ ํ•ด๋„ ๋˜์ง€๋งŒ npm์ด๋ผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์œ„ํ•œ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. npm install @react-navigation/native npm install react-native-screens react-native-sa..

mindevlog.tistory.com

 

1ํŽธ์— ์ด์–ด์„œ bottom tabs ๋ฉ”๋‰ด์™€ stack ๋ฉ”๋‰ด๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์„ ์„ค๋ช…ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค!

์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋‘๊ฐ€์ง€ ๋ฉ”๋‰ด๊ฐ€ ๋”ฐ๋กœ๋”ฐ๋กœ ์‚ฌ์šฉ๋  ์ผ์€ ์—†๊ฒ ์ง€์š”? 

 

 

ํด๋”๊ตฌ์กฐ

Nav
 -Tab
 -Stack

Screen
 -Movie
 -Tv
 -Search

 

 

NavigationContainer ์— ๋‘ ๋ฉ”๋‰ด๋ฅผ ๋ชจ๋‘ ์ ์–ด์ค˜์•ผํ•ฉ๋‹ˆ๋‹ค. tab์™€ stack ๋ฉ”๋‰ด๋ฅผ ๋”ฐ๋กœ ์“ด ์ปดํฌ๋„ŒํŠธ๋ฅผ Root.js ๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ํ•ฉ์ณ์ค๋‹ˆ๋‹ค. 

 

Root.js

root๋ฅผ app.js์—์„œ importํ•ด์ฃผ๋ฉด ๋‘๊ฐ€์ง€ ๋ฉ”๋‰ด๊ฐ€ ๋ชจ๋‘ ์Šคํฌ๋ฆฐ์— ๋œน๋‹ˆ๋‹ค. ์ด ๋•Œ ํ•„์š”์—†๋Š” ํ—ค๋”๋ถ€๋ถ„์„ ์ง€์›Œ์ฃผ๊ธฐ ์œ„ํ•ด์„œ screenOptions์— headerShown์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์จ์ค๋‹ˆ๋‹ค.

const Nav = createNativeStackNavigator()

const Root = () => <Nav.Navigator  screenOptions={{headerShown: false, animation : "fade"}}>
    <Nav.Screen name="Tabs" component={Tabs}/>
    <Nav.Screen name="Stack" component={Stack}/>
</Nav.Navigator>

export default Root

 

App,js

export default function App() {
  return (
      <NavigationContainer>
        <Root/>
      </NavigationContainer>
  );
}

 

 

์ด์ œ ์‹ค์ œ๋กœ ๋‘ ๋ฉ”๋‰ด๊ฐ€ ์ ์šฉ๋  ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ๋กœ ๋„˜์–ด๊ฐ‘๋‹ˆ๋‹ค. 

ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ ์ค‘์ธ ํ•˜๋‚˜์ธ Movie.js ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. 

onPress์— navigate๋ฅผ ์“ฐ๊ณ  ์•ž์ชฝ์— ๋ช…ํ™•ํ•˜๊ฒŒ ์ด๋™ํ•˜์‹ถ์€ ๋ฉ”๋‰ด๋ฅผ ์”๋‹ˆ๋‹ค. 

tab ๋ฉ”๋‰ด์— ์žˆ๋Š” movie๋ฅผ ํด๋ฆญํ•˜๋ฉด stack ๋ฉ”๋‰ด์˜ three ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค!

const Movie = ({navigation: { navigate }}) => (
    <TouchableOpacity
    onPress={() => navigate("Stack", { screen : "Three"})}>
        <Text>Movie</Text>
    </TouchableOpacity>
)

export default Movie

 

 

 

โ—พ ์˜ˆ์‹œ ์™„์„ฑ!

 

 

 

 

 

 

 

 

 

728x90