ReactNative - CSS 두가지 방법

ReactNative - CSS 두가지 방법

• StyleSheet 사용

 import React from "react";
 import { ActivityIndicator, View, StyleSheet } from "react-native";
 import { TINT_COLOR, BG_COLOR } from "../constants/Colors";
 ​
 ​
 const styled = StyleSheet.create.create({
   container: {
     backgroundColor: "black",
     flex: 1,
     justifyContent:"space-around"
   }
 });
 ​
 export default () => (
   <View style={styled.container}>
     <ActivityIndicator color={TINT_COLOR} />
   </View>
 );

• styled-components 사용

 import React from "react";
 import { ActivityIndicator } from "react-native";
 import { TINT_COLOR, BG_COLOR } from "../constants/Colors";
 import styled from "styled-components";
 ​
 const Container = styled.View`
   flex: 1;
   background-color: ${BG_COLOR};
   justify-content: center;
 `;
 ​
 export default () => (
   <Container>
     <ActivityIndicator color={TINT_COLOR} />
   </Container>
 );