[RN공부하기] [14]Icons & More Flexbox

1) 공식문서를 살펴보자.

react-native 공식문서가 아니라 expo 공식문서에 있다.

https://docs.expo.dev/guides/icons/

Icons - Expo Documentation

 

https://icons.expo.fyi/

@expo/vector-icons directory

이링크에서 사용하고자 하는 icon 검색하면 될듯.

 

2) 아이콘 사용을 위해 import를 추가한다.

import { Ionicons } from '@expo/vector-icons';

client\Components\TodoItem.jsx

import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
/* icon 사용을 위해 */
import { MaterialIcons } from '@expo/vector-icons';
export default function TodoItem({ item,pressHandler }) {

    return (
        <TouchableOpacity onPress= { ()=> pressHandler(item.key)}>
            <View style={styles.Item}>
                <MaterialIcons name="delete" size={18} color='#333'></MaterialIcons>
                <Text>{item.todo}</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    Item: {
      padding:16,
      backgroundColor : '#f0f8ff',
      borderRadius:10,
      borderStyle: 'solid',
      borderWidth: 1,
      marginBottom:10,
      flexDirection:'row',
    }
});

원래 <Text style={styles.Item}>...</Text> 이었는데 <View>...</View> 컴포넌트를 추가해서 감싸주면서 css를 옮겼다.

결과)

왼쪽 휴지통 위치가 마음에 들지 않는다. 오른쪽 끝에 휴지통 놓고 왼쪽에 텍스트 배치하는 레이아웃을 만들어보자!

 

import React from 'react'
client\Components\TodoItem.jsx
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
/* icon 사용을 위해 */

import { MaterialIcons } from '@expo/vector-icons';
export default function TodoItem({ item,pressHandler }) {

    return (
        <TouchableOpacity onPress= { ()=> pressHandler(item.key)}>
            <View style={styles.Item}>
                <Text style={styles.ItemText}>{item.todo}</Text>
                <MaterialIcons style={styles.ItemIcon} name="delete" size={18} color='#333'></MaterialIcons>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    Item: {
      padding:16,
      backgroundColor : '#f0f8ff',
      borderRadius:10,
      borderStyle: 'solid',
      borderWidth: 1,
      marginBottom:10,
      flex : 1,
      flexDirection : 'row',
    },
    ItemText: {
        
    },
    ItemIcon :{
        marginLeft : 'auto',
    }
});

View 컨테이너에 flex :1 주고, flexDirection을 주면 자식 컨테이너들이 display: flex , flex-direction: row특성을 가진다. 그상태에서 휴지통 아이콘에 스타일로 ItemIcon에 marginLeft : auto를 주면 왼쪽끝 오른쪽 끝 정렬가능

결과 )