RN Navigation v5 / React Native 화면 전환

* window 환경 기준

 

 

관리자모드로 cmd 실행 

npm i -g create-react-native-app

- 설치

 

일반 cmd 실행

create-react-native-app reactNativeNavigation

- reactNativeNavigation 이름의 RN 프로젝트 생성

 

cd reactNativeNavigation

- 만든 프로젝트로 이동

 

npm install @react-navigation/native

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

npm install @react-navigation/stack

- module 설치.

 

----여기서부터 코드----

//App.js

 

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

 

import Home from './screens/Home';

import Blog from './screens/Blog';

import BlogDetails from './screens/BlogDetails';

 

const Stack = createStackNavigator();

 

function NavStack() {

  return (

     <Stack.Navigator

        screenOptions={{

          headerTitleAlign: 'center',

          headerStyle: {

            backgroundColor: '#621FF7',

          },

          headerTintColor: '#fff',

          headerTitleStyle :{

            fontWeight: 'bold',

          },

        }}

      >

      <Stack.Screen 

        name="Home" 

        component={Home} 

        options={{ title: 'Home' }}

      />

      <Stack.Screen 

        name="Blog" 

        component={Blog} 

        options={{ title: 'Blog' }}

      />

      <Stack.Screen 

       name="BlogDetails" 

       component={BlogDetails} 

       options={{ title: 'Blog Detail' }}

      />

    </Stack.Navigator>

  );

}

 

export default function App() {

  return (

    <NavigationContainer>

      <NavStack />

    </NavigationContainer>

  );

}

 

 

//////////////////////////////////////////////////////////////////////

 

 

// screens/Home.js

 

import React, { Component } from 'react';

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

 

class Home extends Component {

  render() {

    return (

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

        <Text>Home screen</Text>

        <Button

            title="Go to Blog Details"

            onPress={() => {

              this.props.navigation.navigate('BlogDetails', {

                postId: 3006,

                otherParam: 'Pass whatever you want here',

              });

            }}

          />

      </View>

    );

  }

}

 

export default Home;

//////////////////////////////////////////////////////////////////////

 

 

// screens/Blog.js

 

import React, { Component } from 'react';

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

 

class Blog extends Component {

  render() {

    return (

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

        <Text>Blog screen</Text>

      </View>

    );

  }

}

 

export default Blog;

 

 

//////////////////////////////////////////////////////////////////////

 

 

// screens/BlogDetails.js

 

import React, { Component } from 'react';

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

 

class BlogDetails extends Component {

  render() {

    const { postId, otherParam } = this.props.route.params;

    return (

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

        

        <Text>Post id is: {postId}</Text>

        <Text>{otherParam}</Text>

 

        <Button

            title="Go to Blog"

            onPress={() => {

              this.props.navigation.navigate('Blog');

            }}

          />

      </View>

    );

  }

}

 

export default BlogDetails;

 

//////////////////////////////////////////////////////////////////////

 

 

App.js에서 screen들을 정의

Home.js에서 BlogDetails로 화면전환하며 postId, otherParam 데이터 전달.

BlogDetails 에서 postId, otherParam 데이터 받아 텍스트로 띄워준다.

 

 

 

출처 https://www.positronx.io/react-native-navigation-example-tutorial/

React Native Navigation v5 Example Tutorial - positronX.io