[React Native]스타일링

React Native 는 CSS를 지원하지 않지만 Reac Native 스타일링은 CSS의 영향을 받아 만들어졌다.
(유사한 프로퍼티의 이름과 값을 사용)
대신,인라인 스타일(Inline Style)을 추가해서 스타일 객체를 프로퍼티로 전달하거나

별도의 객체를 정의해서 그걸 프로퍼티로 전달한다.
스타일은 JavaScript에서 정의하지만 CSS의 프로퍼티와 기능 일부만 지원한다.

Style property

모든 요소에서가 아닌 일부에서만 지원하는데 예를 들면 View , Text 에서 지원된다.

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

export default function App() {
  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput placeholder="Your Course Goal!" style={styles.textInput} />
        <Button title="Add Goal" />
      </View>
      <View>
        <Text>List of goals...</Text>
      </View>
    </View>
  );
}

//이렇게 쓰는 이유는 StyleSheet를 통해 유효성 검증도 할 수 있고 성능향상에도 도움

const styles = StyleSheet.create({
  appContainer: {
    padding: 50,
  },
  inputContainer: {
    // borderWidth: 2,
    // borderColor: "black",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  textInput: {
    borderWidth: 1,
    borderColor: "black",
    width: "70%",
    marginRight: 3,
    padding: 5,
  },
});