How to combine a styles object with an inline style in React Native?

Question

I am trying to combine an inline style transform: [{ rotate: '180deg'}] with an already existing styles object styles.buttonText without modifying the styles object. I have tried the following ways:

<Text style={{...styles.buttonText, transform: [{ rotate: '180deg'}]}}>^</Text>

and

<Text style={{...styles.buttonText, ...{transform: [{ rotate: '180deg'}]}}}>^</Text>

and

<Text style={Object.assign({}, styles.buttonText, {transform: [{ rotate: '180deg'}]})}>^</Text>

But I keep getting this same error message:

TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.

Does anyone know what is going on or how I can get this to work?

Answer 1

If you want to combine styles on a element you have to pass an array to the style property. The last item in the array will take precedence.

eg:

<Text style={[styles.buttonText, {transform: [{ rotate: '180deg' }]}]}>^</Text>

see style docs

Answer 2

我得到它与此一起工作：

<Text style={[styles.buttonText, {transform: [{ rotate: '180deg' }]}]}>^</Text>