[React Native] react-native-paper란? / 사용법

react-native-paper란? 

React native에서, UI 색상을 쉽고 세련되게 꾸밀 수 있도록 도와주는 Node.js 패키지

React Native Paper

 

 

react-native-paper 설치

npm i react-native-paper

 

react-native-paper 사용하기

Colors 객체에서, 색상 정보를 꺼내 사용한다. ( 파란색 - Colors.blue500 )

500 : 주색상
200 : 주색상의 연한 버전
700 : 주색상의 진한 버전

import {StyleSheet} from 'react-native'
import {Colors} from 'react-native-paper'

const App = () => {
  return (
    <SafeAreaView style={styles.safeAreaView}>
      <Text style={styles.text}>Default Text</Text>
    </SafeAreaView>
  );
};

// Colors 객체에서, 색상 정보 꺼내기
const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.blue500,
  },
  text: {fontSize: 20, color: Colors.blue200},
});

export default App;