react / Navigator로 화면간 이동 가능하게 만들기

생성문

npx react-native init sample26 --template react-native-template-typescript

설치문

npm install react-native-gesture-handler

npm install @react-navigation/native


npm install @react-navigation/native-stack


npm install react-native-safe-area-context


npm install react-native-screens


npm install watcher

파일구조

 

 

src 폴더 생성 > 그안에 screens 생성 > DetailScreen, HomeScreen 생성

 

HomeScreen.tsx

import { useNavigation } from "@react-navigation/native";
import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";

export default function HomeScreen(){

    const navigation = useNavigation()

  return(
  <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button title='Detail로 이동' onPress={()=> navigation.navigate("Detail")}/>
  </View>
  )
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    }

})

 

DetailScreem.tsx

import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";

export default function DetailScreen(){


    return(
        <View style={styles.container}>
            <Text>Detail Screen</Text>
        </View>
        )

}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    }
})

App.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import { View } from "react-native";
import DetailScreen from "./src/screens/DetailScreen"
import HomeScreen from "./src/screens/HomeScreen"


const Stack = createNativeStackNavigator()

export default function App(){


  return(
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">

    <Stack.Screen name="Home" component={HomeScreen}/>
    
    <Stack.Screen name="Detail" component={DetailScreen}/>

    </Stack.Navigator>
  </NavigationContainer>

  )
}

 

 

 

실행화면

 Home화면

 

 

 

Detail 화면