자바스크립트 개발자 포럼React Native의 기본 컴포넌트 네이티브 소스파일 수정하기
React Native(이하 RN)의 View나 TextInput 같은 기본 컴포넌트를 수정이 필요할 때가 있습니다. JS단에서 기본 컴포넌트를 다른 컴포넌트로 감싸던가 Class를 extend해도 되지만 네이티브적인 제공하지 않은 네이티브 API를 열어준다거나 살짝만 수정하고 싶을 때가 있습니다. 그 방법을 정리해봤습니다. (Titanium을 할 때도 그랬는데 사실 프로젝트를 진행하다 보면 이럴일이 꼭 발생하더군요.)
예) 공포의 빨간 화면을 다른 색으로
리액트 코리아에서 이준혁 님(멘션 하려 했는데 여기에는 아직 가입을…)의 빨간 에러 화면이 너무 싫다는 글을 보고 이를 변경하는 예로 한번 정리해봤습니다.
iOS
-
현재 RN 프로젝트의
/node_modules/react-native/React/Modules/RCTRedBox.m파일을 열고 -
다음 코드의 background 컬러를
[UIColor colorWithRed:0.8 green:0 blue:0 alpha:1]에서 원하는 색으로 바꾸고- (instancetype)initWithFrame:(CGRect)frame { if ((self = [super initWithFrame:frame])) { self.windowLevel = UIWindowLevelAlert + 1000; self.backgroundColor = [UIColor colorWithRed:0.8 green:0 blue:0 alpha:1]; self.hidden = YES; -
react-native run-ios로 다시 빌드해주면 됩니다.
정말 간단합니다. 그런데 Android는…
Android
RN의 Android 소스에서 build를 하는 것을 해본 적 없는 분이라면 하지 않기를 권합니다. 에러 컬러 바꾸겠다고 이 모든 것을 세팅해야 하고 긴 빌드 시간을 기다려야 합니다.
-
현재 RN 프로젝트의
/node_modules/react-native/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml파일을 열고 -
다음 코드의
android:background컬러를#E80000에서 원하는 색으로 바꾸고<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#E80000" -
(자 이제부터 사리 나오는 작업 시작입니다.
) RN 공식 문서를 보고 설정합니다.
- 단
1. Installing the fork는 하지 마세요. 위에서 소스 수정했으니 된 겁니다. - NDK는 설치하라고한 버전을 설치하세요. (다른 버전 했다가 빌드 안됩니다.)
- 빌드는
react-native run-android로 다시 빌드해주면 됩니다. (RN 문서에는 Android Studio로 하라고 적혀있는데 안 해봤습니다.)
그럼 이렇게 바뀝니다. (이런! 파란색으로 바꿨더니 윈도우 파란 화면이 생각나서 더 싫군요. 다른 색으로 바꿔야겠습니다. 
)
