react-native에서 네이티브 모듈을 한번도 넣어본적이 없어서 하루종일 고생하고 노트로 남긴다.

먼저 모듈의 저장소는 다음과 같다.
https://github.com/react-native-community/react-native-linear-gradient

iOS

install

다음 명령어를 실행하여 모듈을 설치한다.

yarn

yarn add react-native-linear-gradient

npm

npm install react-native-linear-gradient --save

using Cocoapods

네이비트에서 라이브러리 관리해주는 Cocoapods를 설치하여 모듈을 추가한다.
먼저 Cocoapods를 인스톨을 한다.

sudo gem install cocoapods

설치하고나서 react-native 프로젝트에서 ios프로젝트 파일이 들어있는 경로로 이동하여 cocoapods 초기화한다.

cd ios
pod init

초기화하면 Podfile 파일이 생긴것을 확인할 수 있는데 Podfile 파일을 편집기로 열면 예제코드가 나와있는데 다음과 같은 형식으로 편집하고 저장한다.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'app' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for app
  pod 'React', :path => '../node_modules/react-native'
  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

end

그리고 install 명령을 실행한다. 혹시 xcodeproj 형식의 프로젝트 파일을 열려있으면 닫아둔다.

pod install

인스톨이 끝나면 xcworkspace 형식의 파일을 연다!
pod 인스톨이 끝날때 [!] Please close any current Xcode sessions and use app.xcworkspace for this project from now on. 메시지를 볼 수 있는데 꼭 xcworkspace파일을 열어줘야한다.

일단 잘 돌아가는지 Run버튼을 눌러 확인해본다.

Write code

모듈 설치가 끝났으면 코드를 작성해보면서 테스트 해본다.
이 모듈은 View 모듈과 같은 방법으로 사용하면 되고, 그라디언트 표현을 위한 몇가지 어트리뷰트가 추가되어있다.
https://github.com/react-native-community/react-native-linear-gradient#examples

간단한 예제코드는 다음과 같다.

import LinearGradient from 'react-native-linear-gradient';

<LinearGradient colors={[ 'green', 'red' ]} style={{ width: 100, height: 100 }}>
    <Text>box</Text>
</LinearGradient>

별 문제없없으면 다음과 같이 그라디언트 박스가 나와있는것을 볼 수 있다.

ignore Cocoapods

ios/Pods 경로에 있는 파일이 많기도 하고, pod install을 통해서 설치가 가능하기 때문에 ignore를 시켜서 push할때 부담을 줄여줄 필요가 있다. 다음과 같이 프로젝트 루트 경로에 .gitignore 파일에서 ignore시킬 경로를 추가해준다.

# Cocoapods
ios/Pods/