2022.04.08 (금)

React Native  npx react-native init

신규 RN 프로젝트를 생성하는데 타입스크립트 템플릿을 적용함과 동시에 아직 RN 0.68 버전은 불안해서 0.66 버전으로 생성하려고 했다.

 

npx react-native init --version 0.66.4 --template react-native-template-typescript

 

그래서 위와 같이 코드를 입력했는데 0.68 버전으로 생성됐다.

 

찾아보니 typescript 템플릿을 적용할때는 템플릿에 버전을 지정해 RN 버전을 설정해야 한다고 한다.

 

 

npx react-native init --version 0.66.4 --template react-native-template-typescript@6.8.6

 

으로 프로젝트를 생성하니 typescript가 적용된 RN 0.66.4 버전 프로젝트가 잘 생성되었다.

 

---

​Git

새로운 프로젝트를 위해 새 레포지토리를 생성했다.

 

로컬에서 레포지토리에 코드를 push하고 깃헙에서 Read.me 파일을 생성하니 다시 로컬에서 push를 하기 전에 pull을 해야 했다.

 

그런데

 

힌트: You have divergent branches and need to specify how to reconcile them.
힌트: You can do so by running one of the following commands sometime before
힌트: your next pull:
힌트:
힌트:   git config pull.rebase false  # merge
힌트:   git config pull.rebase true   # rebase
힌트:   git config pull.ff only       # fast-forward only
힌트:
힌트: You can replace "git config" with "git config --global" to set a default
힌트: preference for all repositories. You can also pass --rebase, --no-rebase,
힌트: or --ff-only on the command line to override the configured default per
힌트: invocation.
fatal: Need to specify how to reconcile divergent branches.

 

이러한 에러가 발생하며 pull 이 안 됐다.

 

찾아보니 git pull 전략을 설정해야 한다고 한다.

 

그래서 위 메시지에서 제시된 방법 중 세번째인 fast forward (ff) 방식을 설정했다.

 

git config pull.ff only

 

(참고로 only 키워드는 해당 레포지토리에만 적용하는 것이고 --global을 넣으면 전역적으로 설정할 수 있다.)

 

그런데

 

fatal: 정방향이 불가능하므로, 중지합니다.

 

이런 에러가 발생했다.

 

fast foraward가 안 되는 것이었다.

 

그래서 

 

git pull --rebase

 

로 rebase를 진행하고

 

git config --unset pull.ff

git config pull.rebase true

 

 

로 fast forward 설정한 것을 해제한 후 rebase를 디폴트로 설정했다.

 

merge는 merge할 때마다 추가 커밋이 생겨서 불-편해 rebase로 설정했다.

 

---

React Native - React Navigation

1.  SafeAreaView

React Navigation을 사용하는 RN 프로젝트를 생성하고 route 세팅을 하고 있었다.

 

그런데 IOS에서 SafeArea가 잘 적용되지 않았다.

 

찾아보니 React Navigation를 사용할 때는 React Native에서 기본 제공하는 SafeAreaView가 아닌 react-native-safe-area-context의 SafeAreaProvider와 SafeAreaView를 사용해야 한다고 한다.

 

이전에는 이러한 문제를 경험해본 적이 없는데 왜 이번에만 이런지 잘 모르겠다.

 

적용 방법은 다음과 같다.

 

import React from 'react';
import { Provider } from 'react-redux';
import store from './src/store';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './src/utils/RootNavigation';
import AppMain from './src/navigations/AppMain';

const App = () => {
  return (
    <Provider store={store}>
      <SafeAreaProvider>
        <NavigationContainer ref={navigationRef}>
          <AppMain />
        </NavigationContainer>
      </SafeAreaProvider>
    </Provider>
  );
};

export default App;

 

다른 부분은 무시하고 SafeAreaProvider만 확인하면 된다. NavigationContainer보다 상위에서 감싸주기만 하면 된다.

 

이렇게 감싸주고 일반적으로 SafeAreaView를 사용하듯 하위 컴포넌트에서 사용하면 된다. (react-native-safe-area-context의 것을 사용해야 한다.)

 

참고: https://reactnavigation.org/docs/handling-safe-area/

https://reactnavigation.org/docs/handling-safe-area/