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/
reactnavigation.org
'Computer Science > 1일 기록' 카테고리의 다른 글
2022.04.19 (화) (0) | 2022.04.20 |
---|