Splash 화면에서 background에 linear-gradient를 적용할 일이 생겼다.
이런 식으로 component를 제작했는데 linear-gradient를 알아듣지 못해서 build가 계속 실패했다.
알고보니 expo에는
expo-linear-gradient라는 라이브러리가 존재했다.
그래서
npx expo install expo-linear-gradient를 통해 설치해주었다.
import {LinearGradient} from 'expo-linear-gradient';import를 이런 식으로 하면 된다.
그런데 문제가 생겼다. 내가 Styled-components를 사용하고 있다는 것이었다.
같이 적용하기 위해 시도해본 방법은 다음과 같다.
-
< SplashContainer > 안에 < LinearGradient >를 집어넣는다. -> style에 SplashContainer를 집어넣었는데 style에 빨간 줄이 뜨면서 "이 호출과 일치하는 오버로드가 없습니다." 라는 문구를 만나게 된다.
-
import LinearGradient from 'react-native-linear-gradient'
export const Container = styled(LinearGradient).attrs({
colors: ['#000','#fff'],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
})/* your css here */; 이 코드는 View에서 빨간 줄이 떴다. -
< ImageBackground >를 이용하기. 결국 아래 링크의 작성자는 이것을 이용한 거 같은데 내가 느끼기엔 < LinearGradient >와 결국 style를 이용한다는 점에서 사용하는 방법은 같다고 생각했다.
(2,3번 방법 출처 : https://stackoverflow.com/questions/58106349/why-cant-i-use-a-linear-gradient-with-styled-components)
그래서 해결방안은?
< LinearGradient >의 style이 styleProp을 필요로 하기 때문에 그냥 StyleSheet를 사용하기로 했다.
Styled-components를 사용하게 된 이유는 동아리에서 스터디를 하면서 사용했기에 익숙하기도 하고 재사용성을 높이기 위함이었는데 사용할 수 있는 범위 내에서 최대한 활용해야겠다고 생각했다.
(추가)
linear-gradient는 기본적으로 background-image 속성에 넣는 것이라고 한다. (background에 넣어도 되긴 한다!)
그래서
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72);으로 넣어봤는데 build는 되지만 적용은 안됐다.
