설치해야하는 모듈
npm install @react-navigation/native
npm install @react-navigation/bottom-tabs
모듈 추가
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
Navigation 사용하기
Bottom Naviagtion을 사용하기 위해 Navigator()를 선언해준다.
const Tab = createBottomTabNavigator();
다음으로는 Tab으로 사용할 화면 2개를 만들어두자.
Home.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const Home = () => {
return (
<View style={styles.view}>
<Text>Home</Text>
</View>
);
};
const styles=StyleSheet.create({
view: {
backgroundColor:'#fff',
flex:1,
justifyContent:'center',
alignItems:'center'
}
})
export default Home;
Settings.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const Settings = () => {
return (
<View style={styles.view}>
<Text>Settings</Text>
</View>
);
};
const styles=StyleSheet.create({
view: {
backgroundColor:'#fff',
flex:1,
justifyContent:'center',
alignItems:'center'
}
})
export default Settings;
Navigation을 사용할 때는 항상 제일 바깥쪽을 NavigationContainer로 감싸줘야 한다.
그안에 위에서 선언해두었던 Tab을 사용하여 Tab.Navigator를 넣고
미리 만들어두었던 Home과 Settings를 가져와서 BottomNavigation을 만들 수 있다.
import Home from './Home';
import Settings from './Settings';
const App = () => {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
);
};
initialRouteName은 초기 탭을 정해주는 코드이다.
이게 없으면 자동으로 제일 위에 있는 Tab "Home"을 처음으로 시작한다.
<Tab.Navigator initialRouteName="Home">
실행화면
아직 아이콘은 설정해주지 않아 X표시 상태이다.
전체 코드
App.js
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import Home from './Home';
import Settings from './Settings';
const Tab = createBottomTabNavigator();
const App = () => {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
);
};
export default App;
'Android > React-Native' 카테고리의 다른 글
[React-Native] Stack Navigation (0) | 2022.10.20 |
---|---|
[React-Native] Android / iOS에서 Icon 사용하는 법 (0) | 2022.10.18 |
[React-Native] SectionList (2) | 2022.10.15 |
[React-Native] FlatList (0) | 2022.10.14 |
[React-Native] mac 세팅 (0) | 2022.10.13 |
댓글