네이티브 : 외부 및 인라인 스타일을 결합하는 방법?

이것은 _renderRow 함수의 일부입니다. 버튼에 대한 기본 스타일과 행의 변수에서 읽은 스타일이 있습니다. 이 예제에서는 '# f00'이지만 thisColor와 같은 변수가 될 수 있습니다. 외부 스타일을 인라인 스타일과 결합하려면 어떻게해야합니까?네이티브 : 외부 및 인라인 스타일을 결합하는 방법?

이런 식으로 뭔가,하지만이 작동하지 않습니다

<TouchableHighlight style={[styles.button]{ backgroundColor: '#f00'}}

을 아니면이 TouchableHightlight 내부 용기와 둥지 그것을해야합니까 대신 해당 요소에 대한 인라인 스타일을 넣어?

<TouchableHighlight style={{ ...styles.button, backgroundColor: '#f00'}}

출처

2016-10-18 Niclas

귀하의 브래킷이 잘못 :

출처

2016-10-18 20:51:36

는 확산 구문을 사용할 수 있습니다. 당신이 배열 구문을 계속 사용하려는 경우, 대신를 사용

이

<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}

출처

2016-10-18 20:40:37

덕분에,이 좋은 대안이다. 스타일에 대한 문서의 확산 구문을 그렇게 많이 보지 못했기 때문에 다른 답변을 수락하러 갈 것이지만 둘 다 훌륭하게 작동합니다! – Niclas

하지만 그 대답은 정확하지 않습니다, IMO, 당신은 그것을 테스트 했습니까? 하나의 결합 된 스타일 객체가 아니라 여러 개의 스타일 객체를 전달합니다. –

@Niclas'styles.button'이 유효한 rect 스타일 객체 인 경우, [spread syntax] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)가 맞습니다. 갈 길. – Ted

이 테스트, 정답 기본 0.44.2 반응에 :

<TouchableHighlight style={{...styles.button, ...{backgroundColor: '#f00'}}}>

출처

2017-10-05 15:06:24

OP를 도와 주셔서 감사합니다. 답변을 볼 수있는 다른 사람들을 도울 수있는 더 자세한 설명/공식 문서를 추가해 주실 수 있습니까? – dubes

나는 이전의 코멘트로 몇 가지 테스트를하고 나 자신을 테스트했고, 나는 그것을 작동 시켰습니다;) 공식적인 문서는 그렇지 않습니다 ... –

네이티브 : 외부 및 인라인 스타일을 결합하는 방법?

답변

관련 문제