Page 이동할때는 역시 react-navigation

react-navigation 사용법

Navigating Between Screens · React Native

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가 나옴