React-native tags

Darcy Daeseok YU ·2022년 2월 17일
0
post-custom-banner

react-native 에서 사용하는 tags
아래와 같이 import해서 사용한다.

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

View === div

Text === span, p, h1...
(text 글은 무조건 TEXT와 함께... 아니면 오류 발생)

스타일 정의는 두가지 방법 모두 유효하나, 후자는 자동완성 지원안됨.

const styles = StyleSheet.create({
	constiner : { 
		backgroundColor : "red",       

	},
    text: {    
    	fontSize: "red",
       
    }    
}) 

or 


const styles = {
	constiner : { 
		backgroundColor : "red",       

	},
    text: {    
    	fontSize: "red",
       
    }    
}

CSS 프로퍼티를 98%정도 사용가능 몇몇은 안됨(e.g. border:"1px solid red")

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>YUDS---1</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
profile
React, React-Native https://darcyu83.netlify.app/
post-custom-banner

0개의 댓글