[RN공부하기] [2]Views, Text & Styles

//App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.boldText}>Hellow,World</Text>
      </View>
      <View style={styles.body}>
        <Text>Body Text details</Text>
        <Text>Body Text details</Text>
        <Text>Body Text details</Text>
        <Text>Body Text details</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    backgroundColor: 'pink',
    padding:20,
  },
  boldText: {
    fontWeight: "bold",
  },
  body:{
    backgroundColor: 'yellow',
    padding:20,
  }
});

일반적인 react랑 조금 다른 인라인 style을 쓰는듯 하다. 공식 홈페이지에도 나와있는 내용.

여기서 view나 text를 컴포넌트화 해서 사용하면 될듯? 네비게이션 메뉴나 바디안에 내용페이지만 바꿔줘도 될듯.

 

결과화면)