React-Native 화면 전환

App.js

import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/native-stack";

const App = () => {
  const [screen, setScreen] = useState("Home");

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home" // Home이라고 정의해두면 메인 화면이 Test가 된다
          component={Test}
        />
        <Stack.Screen
          name="Test2"
          component={Test2}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Test1

import React from 'react';

const Test = (navigation) => {
  return (
    <View>
      <Button
        title="Test2"
        style={{
          backgroundColor: "red",
          color: "white",
          fontSize: 20,
        }}
        onPress={() => navigation.navigate("Test2")}
      />
    </View>
  );
};

export default Test;

Test2

import React from 'react';

const Test = (navigation) => {
  return (
    <View>
      <Button
        title="Test2"
        onPress={() => navigation.navigate("Test2")}
      />
    </View>
  );
};

export default Test;

해당 코드로 화면을 넘기는 navigation을 호출하는것도 가능

const navigation = useNavigation();

파라미터 값을 같이 넘기고 싶다면 다음과 같은 방법 사용

// BoardRead 컴포넌트에서의 TouchableOpacity 부분 수정
<TouchableOpacity
    onPress={() => navigation.navigate('Chat', { title, like, check })}
>
    {/* 나머지 코드 */}
</TouchableOpacity>

import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const Chat = () => {
    const route = useRoute();
    const { title, like, check } = route.params;

    return (
        <Text>{title}, {like}, {check}</Text>
    );
};

export default Chat;