React Navigation 5 Tutorials

📌 튜토리얼을 따라한 프로젝트입니다!

화면 전환 예제

DetailsScreen 생성하기

HomeScreen을 복붙해서 이름을 DetailsScreen으로 바꾸어줍시다!

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

Home에 Button 추가하기

1. Button import 하기

import { SafeAreaView, StyleSheet, ScrollView, View, Text, Button, StatusBar,}
from 'react-native';

2. HomeScreen에 Button 추가하기

<Button
  title="Go to details screen" />

3. App 컴포넌트에 Stack.Screen 추가하기

<Stack.Screen name="Details" component={DetailsScreen} />

4. Button에 onPress 이벤트 넣기

const HomeScreen = ({navigation}) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to details screen" 
        onPress={()=> navigation.navigate("Details")}/>
    </View>
  );
};

5. 결과보기

Details에 Button 추가하기

DetailsScreen 컴포넌트 코드 보기

const DetailsScreen = ({navigation}) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details screen Again" 
        onPress={() => navigation.navigate("Details")}/>

      <Button
        title="Go to Home screen" 
        onPress={() => navigation.navigate("Home")}/>

      <Button
        title="Go back" 
        onPress={() => navigation.goBack()}/>

      <Button
        title="Go to the first screen" 
        onPress={() => navigation.popToTop()}/>
    </View>
  );
};

결과보기

상단바 option 설정하기

App 컴포넌트 코드보기

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
          headerStyle:{
            backgroundColor: '#009387',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        }
      }}>
        <Stack.Screen name="Home" component={HomeScreen} options={{
          title : 'Overview'
        }}/>
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

결과보기