[RN] css적용하기

App.js

import React from 'react';
import {SafeAreaView} from 'react-native';
import Box from './components/Box';


const App = () => {
  return (
    <SafeAreaView>
      <Box />
    </SafeAreaView>
  );
};

export default App;

 

 

 

components/Box.js

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

function Box() {
  return <View style={styles.box} />;
}

const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  },
});

export default Box;

 

 

근데 컴포넌트 스타일을 지정할때 여러 스타일을 적용하고 싶다면 배열형태로 설정하면 된다!!

<View style={[styles.box, styles.rounded]} />

 

이런식으로

 

---

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

function Box(props) {
  return <View style={[styles.box, styles.rounded]} />;
}

const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  },
  rounded: {
    borderRadius: 16,
  },
});

export default Box;