react-navigation 사용법
App.js
import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {StyleSheet} from 'react-native';
import Home from './screens/Home.js';
import FirstPage from './screens/FirstPage';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Page1" component={FirstPage} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
screen/Home.js
import React from 'react';
import {View, Text, Button, TouchableOpacity, StyleSheet} from 'react-native';
const Home = ({navigation}) => {
return (
<View>
<TouchableOpacity style={styles.button}>
<Text style={{color: 'black'}}>버튼입니다</Text>
</TouchableOpacity>
<Text>Home입니당</Text>
<Button title="Page1 열기" onPress={() => navigation.navigate('Page1')} />
</View>
);
};
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
},
});
export default Home;
screen/FirstPage.js
import React from 'react';
import {View, Text} from 'react-native';
const FirstPage = () => {
return (
<View>
<Text>FirstPage</Text>
</View>
);
};
export default FirstPage;
첫 화면으로 Home.js에 해당하는 화면이 나옴.
PAGE1 열기 버튼을 누르면 FirstPage.js가 나옴
'React Native' 카테고리의 다른 글
react-native-video 사용법 (에러주의) (2) | 2022.04.12 |
---|---|
NFC를 태그하고 페이지를 이동하는 법 (1) | 2022.04.12 |
ScrollView의 간지기능 (0) | 2022.04.06 |
React Native의 기본 레이아웃 (0) | 2022.04.06 |
지원하는 Component와 APIs가 적어서 만들 수가 없잖아!!!!! (0) | 2022.04.06 |