React-Native/[RN]Expo

[RN공부하기] [8]Todo App (part 1)

Dev갱이 2021. 11. 9. 14:03
728x90

(1) 헤더 컴포넌트를 만들어서 추가.

//Header.jsx
import React from 'react'
import { View, Text, StyleSheet } from 'react-native';

export default function header() {
    return (
        <View style={styles.header}>
            <Text style={styles.header__title}>TodoApp</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    header: {
        backgroundColor: '#28324a',
        height:80,
        paddingTop:28,
        textAlign:'center',
    },
    header__title:{
        color:'#ffffff',
        textAlign:'center',
        fontSize:20,
        fontWeight:'bold'

    }
});
import Header from './Components/Header';
export default function App() {

  
  return (
    <View style={styles.container}>
      <Header></Header>
      {/* contents */}
    </View>
  );
}

728x90