[TIL-170] React Native

React Native 안드로이드 개발 중 앱 "계속 중단됨"

특정 화면 이동 시, 앱 "계속 중단됨"

잘 돌아가던 앱이 에러도 없이 확 꺼졌다. 홈에서 다음 화면으로 넘어가는 그 지점에서 반복적으로 "계속 중단됨"이라는 알림창이 뜨고 앱이 닫힌다. 앱이 중단되는 지점에서 다른 화면으로 이동시켜보았더니 잘 작동한다. 해당 화면에서 문제가 있기는 한 것 같다.

 

데이터 import에서 문제가?

import {BANKS} from '../../assets/data/bankData';

아무리 봐도 잘못된 코드가 없어서 찾아보다가 고친 부분 중 data를 import한 부분을 주석 처리해보았다. 그랬더니 에러가 뜨면서 앱이 꺼지지 않았다. 그래서 온갖 방법으로 imoprt한 데이터를 고쳐보았지만 에러가 발생하지 않는 한 화면은 뜨지 않았다...

이게 앱 중단의 근본적인 원인은 아니고, 에러가 있을 때는 앱이 종료되지 않아서 에러를 보여주는 것 같다. 다른 부분을 주석 처리해서 에러가 발생할 경우에도 마찬가지로 앱이 종료되지 않았다.

 

해결 : 스타일드 컴포넌트

StyleSheet를 쓰다가 Styled Component로 바꾸면서 css 문법이 잘못 적용돼서 문제가 생긴 거였다. 어째 스타일밖에 건드린 게 없는데 왜 갑자기 문제가 생겼나했다.

const BankSelector = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: 'center';		// <=== 여기
  height: 60px;
  padding-horizontal: 15px;
  border-width: 1px;
  border-bottom-width: 0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
`;

스타일시트는 객체이기 때문에 css 속성명은 카멜케이스로 써야 하고, 값은 문자일 경우 꼭 따옴표 감싸야 한다. 그런데 스타일드 컴포넌트는 백틱 안에서 css 문법을 그대로 사용할 수 있게 된다. 이때까지 다 잘 고쳤다고 생각했는데, 속성명에 하이픈(-) 넣는 거는 잘 수정해놓고 값에서 따옴표를 제거하지 않은 게 있는지 놓쳤다.

 

 

 

React Native <Image /> source={require('path/img.png')}

require() 안에 표현식 불가

<Image> 컴포넌트가 포함된 컴포넌트를 만들어서 이미지 경로를 props로 전달하여 require에 값을 변수로 넘겨주고 싶었다. 하지만 변수가 통째로 들어오거나 `../../${imgName}.png` 이런 식으로 값이 바뀌게 하고 싶어도 require 안에서 변수를 사용할 수 없다고 한다.

https://090k.tistory.com/152    

그래서 require('path...')를 통째로 변수로 만들어 넘겨준 뒤, source=