yarn add @react-navigation/native
yarn add @react-navigation/stack

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

<Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "black",
                    borderBottomColor: "black",
                    shadowColor: "black",
                    height:100
                },
                //헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
                headerTintColor: "#fff",
                headerBackTitleVisible: false
            }}
        >

            {/* name에 해당 하는 부분이 페이지의 타이틀이 됩니다.*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>

//해당 페이지의 제목을 설정할 수 있음
navigation.setOptions({
   title:'나만의 꿀팁'
})

//Stack.screen에서 name 속성으로 정해준 이름을 지정해주면 해당 페이지로 이동하는 함수
navigation.navigate("DetailPage")

//name 속성을 전달해주고, 두 번째 인자로 딕셔너리 데이터를 전달해주면, Detail 페이지에서
//두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 로 받을 수 있음
navigation.navigate("DetailPage",{
  title: title
})

import { Share } from 'react-native';

Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
        });

expo install expo-linking

import * as Linking from 'expo-linking';

Linking.openURL("https://spartacodingclub.kr")

expo install expo-status-bar

import { StatusBar } from 'expo-status-bar';

<StatusBar style="black" />