[React-Native] React Navigation | 화면 Linking 01

Stack Navigation

- 버튼, 사진을 누르는 등의 작업을 했을 때 화면을 전환시키는 기능

 

 

- App.js를 초기화시키고 실행을 했는데 오류가 난다면?

 1. cd ios

 2. pod install

 

 

---

 

• React Navigation 사용하기

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

const Stack = createStackNavigator();

  - App.js에 해당 모듈 import 해주기

 

* Navigation Container

  - Navigation 구조와 상태를 관리하는 component

  - 모든 Navigation 구조는 <NavigationContaier> 태그 안에 들어가야 한다.

 

* createStackNagivator

  - Screen과 Navigator 두 개의 property를 return하는 함수

  - 화면이 렌더링 되는 부분에서 <Stack.Navigator> & <Stack.Screen> 태그를 작성하자

 

class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen/>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

  - 위에서 Stack createStackNavigator() 함수이다.

  - 따라서 <Stack.Navigator> & <Stack.Screen> 태그 사용 가능

 

 

 

• 새로운 파일 home.js & user.js 생성

class HomeScreen extends Component {
  render() {
    return (
      <View>
          <Text>Home Screen</Text>
      </View>
    )
  }
}

 

• App.js에서 import 해주고, 태그 추가

import HomeScreen from './src/home';
import UserScreen from './src/home';

...

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

- 'Home'이라는 이름의 Header bar와 'Home Screen'이라는 이름의 문구가 잘 뜬다.

-> User로 바꿔도 마찬가지 결과!