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",
},
});