15.6.2 사용자 메뉴 화면 만들기

화면 등록이 끝났으면 사용자 메뉴 화면을 완성해봅시다. 이 화면에서 메뉴 항목을 보여줄 때 사용할 MenuItem 컴포넌트를 다음과 같이 만들어보세요.

components/MenuItem.tsx

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

export interface MenuItemProps {
  onPress(): void;
  name: string;
}

function MenuItem({name, onPress}: MenuItemProps) {
  return (
    <Pressable
      style={({pressed}) => [
        styles.block,
        Platform.OS === 'ios' && pressed && styles.pressed,
      ]}
      onPress={onPress}
      android_ripple={{color: '#eeeeee'}}>
      <Text>{name}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  block: {
    paddingHorizontal: 12,
    paddingVertical: 16,
    backgroundColor: 'white',
    borderBottomColor: '#eeeeee',
    borderBottomWidth: 1,
  },
  pressed: {
    backgroundColor: '#eeeeee',
  },
});

export default MenuItem;