Style

ReactNative에서는 Style을 Javascript을 사용해서 줄수가 있습니다.

따라서 모든 컴포넌트에서는 style이라는 prop을 통해서 적용시킬수가 있습니다.

 

보통적으로 CSS와 비슷합니다. 하지만 예시로 css에서는 background-color를 했다면 react native에서는 backgroundColor 이런식으로 사용을합니다.

 

[예시]

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    backgroundColor :'#efefef'
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
       fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
}