(React Native) Style 다른 파일로 빼서 import 하기 && 페이지 이동

처음에는 되게 헷갈려 했지만 알고보니 간단했다.

 

1. app.js 파일이 있는 경로에 style.js 파일을 만든다.

(다른 이름으로 해도 됩니다.)

2. app.js에 있던 style 코드를 복사하여 style.js로 옮긴 후 const style 앞에 export를 붙입니다.

  (그래야지 다른 파일에서 불러올 수 있습니다.)

3. app.js에 import를 해줍니다.

이렇게 하면 app.js 파일 하나에 style까지 작성을 안해도 되서 깨끗하게 정리할 수 있습니다.

 

4. 사용법은 기존과 동일하게 사용하면 됩니다. (import로 가져왔기 때문에 이전과 똑같습니다)

 

 

---

1. 우선 그림에서 import한 친구들을 쓰려면 다운을 받아야합니다.

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

 

  - 터미널에 입력

npm install @react-navigation/native

npm install @react-navigation/stack

 

2. 아래 코드로 Stack 설정

 

3. App.js을 기준으로 설명

export default function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen

          name="LoginScreen"

          component={LoginScreen}

          options={{

            headerShown: false, // 화면 상단에 헤더를 숨김

            gestureEnabled: false,

          }}

        />

 

     <Stack.Screen

          name="HomeScreen"

          component={HomeScreen}

          options={{

            headerShown: false, // 화면 상단에 헤더를 숨김

            gestureEnabled: false,

          }}

        />

     </Stack.Navigator>

    </NavigationContainer>

  );

}

이렇게 하면 LoginScreen과 HomeScreen에 대한 navigation 설정 완료

4. 이동 방식

 

export const LoginScreen = ({ navigation }) => {

        const handlePress = () => {navigation.navigate('컴포넌트 이름')};

        

         // 버튼클릭 등을 이용하여 실행되게 끔 해야함

 

};

이렇게 설정하면 handlePress 발생 시 원하는 페이지로 이동이 가능하다.