[React-native] style1

• 인라인으로 생성하는 스타일은 랜더링시 매번 생성된다.
• styleSheet.create 로 생성된 스타일은 불변이다(immutable)

inline으로 사용하기

<Text>
  dog is <Text style={{fontStyle:'italic'}}>Good</Text>
</Text>

오브젝트로 사용하기

const italic = {fontStyle: 'intalic'}
...
<Text>
  dog is <Text style={italic}>Good</Text>
</Text>

StyleSheet.create() 사용하기

const styles = StlyeSheet.create({
  italic: {fontStyle: 'intalic'}
})
...
<Text>
  dog is <Text style={styles.italic}>Good</Text>
</Text>

스타일 병합하기

-배열로 병합내용을 넣으며 인라인으로도 넣을 수 있다.
-오른쪽의 객체의 스타일이 우선.
-부적값이 있다면 (false, undefined, null) 무시된다.

const styles = StlyeSheet.create({
  button: {
    backgroundRadius: '8px',
    backgroundColor: '#99CCFF'
  },
  accentText: {
    fontSize: 18,
    fontWeight: 'bold'
  }
})
...
<Text>
  dog is <Text style={[styles.button, styles.accentText, {color: '#FFFFFF'}]}>Good</Text>
</Text>

조건적인 스타일일 사용하기

<Text>
  dog is <Text style={[styles.button, this.state.isMove && styles.accentText]}>Good</Text>
</Text>