2020: React Native (0.61~0.63) 개발 참조#2

1. 경고창 비활성화 방식이 0.63부터 LogBox로 바뀌었다.

 

>> 참조: stackoverflow.com/questions/35309385/how-do-you-hide-the-warnings-in-react-native-ios-simulator

How do you hide the warnings in React Native iOS simulator?

즉,

console.disableYellowBox = true;

위 코드를 아래와 같이 바꿔야 한다.

import {LogBox} from 'react-native';
LogBox.ignoreAllLogs();
LogBox.ignoreLogs(['Warning: ...']);

 

 

2. WebView는 react-native에 포함된 것을 사용하면 안 된다. 경고없이 앱이 죽는다. 대신 react-native-webview를 사용해야 한다.

 

즉,

import {WebView} from 'react-native';

위 코드를 아래와 같이 바꿔야 한다.

import {WebView} from 'react-native-webview';

 

그리고, react-native-webview 5.0 버전 이상을 사용하면 window.postMessage로 통신하지 못하고 window.ReactNativeWebView.postMessage로 통신해야 한다.

 

아래 속성을 추가해 넣으면 잘 동작한다.

injectedJavaScript={`(function() {
  window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})();`}

 

 

3. 1분 이상 대기하는 setTimeout은 사용하면 안 된다. (지금은 경고가 발생하지만 나중에는 동작이 안될 수 있다.)

 

즉,

5분 만에 한 번씩 호출하는 함수가 있다면...

setTimeout(() => this.someFunction(), 5 * 60000);

아래와 같이 1분 미만 시간 단위로 반복하다가 해당 시간이 되면 콜백으로 호출하는 별도 함수를 만들어 사용하는 것이 좋다.

...
let check = this.longTimeout(0, 5, () => this.someFunction());
...

longTimeout = (count, minLimit, callback) => {
  let newCount = count;
  if (newCount++ >= minLimit * 2) {
    if (callback) {
      callback.call(this);
      return null;
    }
  }
  return setTimeout(
    () => this.longTimeout(newCount, minLimit, callback),
    30000,
  );
};

 

 

4. 안드로이드 에뮬레이터에서 디버깅이 되지 않으면... Ctrl+M 눌러서 옵션창을 연 뒤 디버깅 모드를 켜면 된다.

 

 

5. Android Studio에서 디버깅을 하고 싶을 때는 React Native 스크립트를 bundle로 묶어서 android/app/src/main/assets 폴더에 넣으면 된다.

 

아래 스크립트를 실행하면 한방에 된다.

rm -fr android/app/src/main/assets
rm -fr android/app/src/main/res/drawable-*
rm -fr android/app/src/main/res/raw
mkdir android/app/src/main/assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

 

다시 Visual Studio Code에서 디버깅하거나 release 빌드를 하려고 할 때에는 위 세 줄 rm 명령어만 먼저 실행해야 리소스 중복 오류가 발생하지 않는다.

 

 

 

끝.