React-Native 화면전환 최종

1,2,3 다필요없음 이거만 보면됨 TEST다함

App.js

// In App.js in a new project

import * as React from 'react';
import { View, Text,Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//각각의 외부 js파일을 import시켜주는거임 현재 같은폴더내 위치해서 ./파일명 으로 설정
import First from './First';
import Second from './Second';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      //Navigator에서 initialROuteName을 써서 첫번째로 보여줄 화면의 이름을 적는다
      <Stack.Navigator initialRouteName="Details" headerMode="null">
      //나중에 눌러서 보여줄 화면을 미리 선언해놓는다
        <Stack.Screen name="Home" component={HomeScreen}/>
        <Stack.Screen name="Details" component={First} />
        <Stack.Screen name="Seconds" component={Second}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

First.js

import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';

class First extends Component {

    render() {
		//지금머리로 이해가안됨 props에있는 정보를 끌고오는거같은데 경로를 잘모르겠음 바로 찾아봐야됨
        const {navigation} = this.props; 

        return (

            <View style={{flex: 1, justifyContent: 'center'}}>
				//위에 {navigation}으로 아래 navigation.navigate가 잘돌아감 
                <TouchableOpacity onPress={()=> {navigation.navigate("Seconds")}}>
                    <Text>
                        This is First
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}


export default First;

second.js

import React, {Component} from 'react';

import {Text,View,TouchableOpacity} from 'react-native';

class Second extends Component {

    render() {

        const {navigation} = this.props;
        
        return (

            <View style={{flex:1,justifyContent: 'center'}} >

                <TouchableOpacity onPress={()=>{navigation.navigate('Home');}}>
                    <Text style={{alignItems: 'center'}}>Second Page</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


export default Second;

마지막 Home은 딱히 코드설명 필요없어서 넘어가는것만 보여주면되서 안썼음

이런식으로 외부 js파일로 넘어갈수있으면 왠만한거 다만들수있음

 

보다 헷갈리면 react-native navigation 공식문서 들어가서 확인해보면됨