설치
# npm install
npm install react-native-screens react-native-safe-area-context
# ios pad install
cd ios
pod install
cd ..
GraphQL
복사
설명
NavigationContaine : 네비게이션 트리를 관리하는 컴포넌트
Navigato : 네비게이션 스택을 생성
Screen : 네비게이션 스택에 들어갈 화면요소 설정
// App.js
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import StartScreen from './components/test/StartScreen';
import Signin from './components/signin/signin';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="StartScreen" component={StartScreen} />
<Stack.Screen name="Signin" component={Signin} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
JavaScript
복사
Navigator 사용 예시 코드
화면요소(Screen)을 등록할 때는 이름으로 등록하며 이름을 이용하여 화면 이동을 구현 할 수 있음
// /components/test/StartScreen.js
import * as React from 'react';
import { Button, View } from "react-native";
// export를 선언하면 파일 외부에서 해당 함수를 사용할 수 있음
export default function StartScreen({ navigation }) {
return (
<View>
<Button
title="시작하기"
onPress={() => navigation.navigate('Signin')}
/>
</View>
);
}
JavaScript
복사
export를 선언하면 다른 js 파일에서 해당 함수를 사용할 수 있음