💻[React Native] Style

React Component-UI 요소
API- 시스템 호출

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

function singleNumber(props) {
  return (
    <view style={styles.circle}>
      <Text style={styles.label}>{props.number}</Text>
    </view>
  );
}


const styles = StyleSheet.create({
  circle: {
    width: 100,
    height: 100,
    backgroundColor: "#fff",
    justifyContent: 'center',
    alignItems: 'center'
  },
  label: {
    fontSize: 20,
    fontWeight: 'bold'
  }
});




export default singleNumber;

웹의 CSS와 유사

View에 적용할 수 있는 style: ViewStyle(따라서 textstyle은 적용 불가)

Styled-Component

props 넘겨 받기

const Circle = styled.View`
${(props) => {
  if (props.number < 11) {
    return 'background: yellow;';
  } else if (props.number < 21) {
    return 'background:blue;';
  }
}}
  `;

보다 react스럽게 만들 수 있고, 컴포넌트가 하는 일들이 작아지게 됨

ImageBackground: source로 지정

const Container = styled.ImageBackground`
flex:1;
justify-content: center;
align-items: center;
`;


<Container source={{url: 'https://placeimg.com/1280/1280/nature'}}resizeMode = {'stretch'}>