[TIL-153] React Native 시작하기 -

 

React-Native CLI 프로젝트의 구조

[React Native] React Native 프로젝트 시작하기 https://velog.io/@holidenty/React-Native-React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

 

라우팅/네비게이팅

router-flux

router-flux 라이브러리를 이용한 라우팅. 이전에 리액트로 웹 만들 때와 비슷하게 Router.js를 만들어서 렌더링할 컴포넌트를 입력해둔다.

• router flux를 사용한 화면 전환 방법 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=njaegyu&logNo=221129962300 
• React Native 및 Django 인증 시작하기 - 2부 https://afdezl.github.io/post/authentication-react-native-django-2/
• react - native - router - flux 사용 상세 설명 (1) https://intrepidgeeks.com/tutorial/react-local-router-traffic-usage-details-1

 

import react from 'react';
import {Router, Scene, Stack} from 'react-native-router-flux';
import Login from './screens/Login';
import Signup from './screens/Signup';

const Router = () => {
  return (
    <Router>
      <Stack>
        <Scene key="login" title="Login" component={Login} initial></Scene>
        <Scene key="signup" title="Signup" component={Signup}></Scene>
      </Stack>
    </Router>
  );
};

export default Router;

import react from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {Actions} from 'react-native-router-flux';

const Login = () => {
  return (
    <View>
      <Text></Text>
      <View>
        <Image
          onPress={() => {
            Actions.signup();
          }}></Image>
      </View>
    </View>
  );
};

 

 

react-navigation

react native 공식문서에서 안내하는 navigating 방식이다. router-flux가 기존의 리액트 프로젝트에서 했던 방식과 비슷해서 쉬웠지만, 관련 기능을 하는 라이브러리들 중 react-navigation이 가장 관리가 잘되고 있다고 해서 이걸 쓰기로 했다.(https://bangc.tistory.com/13)

• [공식문서] Navigating Between Screens https://reactnative.dev/docs/navigation  
• React Native | React Navigation을 이용한 스크린 이동 https://gaemi606.tistory.com/entry/React-Native-React-Navigation%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A6%B0-%EC%9D%B4%EB%8F%99
• React Navigation 공식 문서 https://reactnavigation.org/docs/navigating/

 

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login}></Stack.Screen>
        <Stack.Screen name="Signup" component={Signup}></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

각 Screen은 다른 스크린으로 이동시켜주는 navigation 객체를 props로 받는다. navigation.navigator() 메서드로 이동할 수 있다.

 

에러

네비게이팅은커녕 화면이 안 뜬다... npm run android 했다가 화면에 에러가 나면서 npx react-native start 하라고 해서 해당 명령어 실행한 거였음. 근데 화면에 아무것도 안 뜬 상황.

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java.

Add the following code to the body of MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

and make sure to add an import statement at the top of this file:

import android.os.Bundle;

https://reactnavigation.org/docs/getting-started 공식문서 참고해서 추가했는데 달라지는 건 없다.

 

그래서 다른 터미널에서 npm run android를 다시 해봤다. 그랬더니 렌더 에러가 떴다. React가 없다는 거다.

 

import react from 'react'; 

import React from 'react';

맨 첫줄에 임포트 해놨는데 소문자 react를 썼다고 문제가 된 것 같다. 대문자로 시작하게 바꾸니까 Render Error가 사라지고 react일 때 사용되지 않았다고 흐린 색이었는데 React는 제대로 나옴.