강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

장우진님의 프로필 이미지
장우진

작성한 질문수

따라하며 배우는 리액트 네이티브 기초

React Native에서 SVG 사용하기

오류 잡기

작성

·

68

0

 

import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import CheckboxUnChecked from '../assets/checkbox-unchecked.svg';
import CheckboxChecked from '../assets/checkbox-checked.svg';
import DeleteIcon from '../assets/delete.svg';
const TodoItem = () => {
  return (
    <View style={styles.itemContainer}>
        <Pressable
            hitSlop={10}
            style={styles.itemTextChecked}
        >
            <CheckboxUnChecked />
            <CheckboxChecked style={styles.itemCheckboxCheckedIcon}/>


        </Pressable>
            <Text 
            style={[styles.itemText, styles.itemTextChecked]}
            >
                코딩하기
            </Text>
        <Pressable
        style={[
            styles.deleteButton,
            styles.deleteButtonDone   
        ]}
        hitSlop={10}
    >
         <DeleteIcon />
        </Pressable>
      <Text>TodoItem</Text>
    </View>
  )
}

export default TodoItem

const styles = StyleSheet.create({}
애뮬 오류 사진.png.webp
)
내가 보낸 이미지 보면 글자가 짤려 왜그런거야? 

선생님이 하란대로 했고 14.1로 인스톨해서 에러도 안났어. 그런데 인스톨 하고나서 보니까 글자가 잘리더라고 왜그런거같아?

import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { StatusBar } from 'expo-status-bar'
import { Platform } from 'react-native';
import InputForm from '../components/InputForm' // 대소문자 정확히 일치
import TodoItem from '../components/TodoItem';


const MainScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
        <StatusBar backgroundColor={'default'} />
      <Text style={styles.pageTitle}>ToDo App</Text>
      <View style={styles.listView}>
        <Text style={styles.listTitle}>할일</Text>
        <TodoItem />
      </View>
      <View style={styles.separator} />
      <View style={styles.listView}>
        <Text style={styles.listTitle}>완료된 일</Text>
      </View> 

<InputForm/>
    </SafeAreaView>
  )
}

export default MainScreen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? 20 : 0,
    backgroundColor: '#f7f8fa'
  },
  pageTitle: {
    marginBottom: 35,
    paddingHorizontal: 15,
    fontSize: 54,
    fontWeight: '600'
  },
  separator:{
    marginHorizontal: 10,
    marginTop : 25,
    marginBottom : 10,
    borderBottomWidth: 1, 
    borderBottomColor: 'rgba(0,0,0,0.2)',
  },
  listView: {
    flex: 1,
  },
  listTitle: {
    marginBottom: 25, 
    paddingHorizontal: 15,
    fontSize: 41,
    fontWeight: '500'
  }
})

이게 mainscreen이야. 알려줄수있어??

답변

답변을 기다리고 있는 질문이에요
첫번째 답변을 남겨보세요!
장우진님의 프로필 이미지
장우진

작성한 질문수

질문하기