그라데이션 적용하기

react-native-linear-gradient

• https://github.com/react-native-community/react-native-linear-gradient

색상조합 참조 사이트

• http://paletton.com/#uid=12P0u0kw0o0n5v3uxudCxjALuee

• https://coolors.co/gradients

설치 (RN 버전 0.60 이상 기준)

#패키지 추가
$ yarn add react-native-linear-gradient

#ios 폴더로 가서 pod install 수행
$ cd ios/
$ pod install
$ cd ../

CocoaPods 사용 시 추가설정

• ios/Podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'spark' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  pod 'react-native-sqlite-storage', :path => '../node_modules/react-native-sqlite-storage'
  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
  pod 'react-native-nmap', :path => '../node_modules/react-native-nmap'
  pod 'NMapsMap'

  target 'sparkTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'spark-tvOS' do
  # Pods for spark-tvOS

  target 'spark-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

#ios 경로에서 pos install 다시 수행
$ pod install

예제 코드

• 공식 문서 잘 돼있으니 참고.

• 여기선 진짜 간단하게만 다룸.

...

<TouchableOpacity onPress={()=>{}}>
    <LinearGradient colors={['#009900', '#000000']}
    style={styles.signIn}
    >
        <Text style={styles.textSign}>Get Started</Text>

    </LinearGradient>
</TouchableOpacity>

...


const styles = StyleSheet.create({
  signIn: {
      width: 150,
      height: 40,
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 50,
      flexDirection: 'row'
  },
  textSign: {
      color: 'white',
      fontWeight: 'bold'
  }
});