React Native <View>, <Text>, style, styled-components

<View></View> 기존 HTML의 <div></div>와 유사 : wrap other elements

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>react native TEST!!!!!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

 

<Text></Text> 글자를 화면에 표시할 때 사용

    <View style={styles.container}>
      Hello World
    </View>

이와같이하면 오류 발생 문자는 무조건 <Text></Text> 로 감싸야함

Style

css는 안드로이드가 인식하지 못함

export default function App() {
  return (
    <View style={styles.container}>
      <Text>react native TEST!!!!!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

StyleSheet.create({

이와같이 스타일의 형태를 기존 css와 유사하게 key:value형태로 정의해야함

=> styled Component 사용해서 정의하자

styled component

import styled from "styled-components"

styled.button`
  font-size: 1rem;
`

아래 CSS 코드가 적용된 <button> HTML 엘리먼트를 만들어낸다고 생각하면 쉽습니다.

button {
  font-size: 1rem;
}

두 코드는 같은 효과

이와 같이 사용하도록 권장

import React from "react"
import styled from "styled-components"

const StyledButton = styled.button`
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  backgroud: white;
`

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>
}