React Native Tutorial 따라하기 📱

📌 튜토리얼을 따라한 프로젝트입니다!

아이콘 추가하기

icons 다운로드하기

TodoListItem 컴포넌트 안에는 사용자가 입력한 할 일 목록 내용이 담기게 됩니다. 또한 해당 목록을 완료했는지 체크할 수 있는 체크 박스와 삭제 버튼을 추가해봅시다. 아이콘은 react-native-vector-icons 을 설치해서 사용하겠습니다.

터미널에 다음 명령어를 입력합시다!

react-native link react-native-vector-icons

주의사항
나는 저 명령어를 입력하니까 error가 나서 아래의 명령어를 순서대로 입력했다.

명령어

npm install --save react-native-vector-icons
react-native link react-native-vector-icons

error

warn Calling react-native link [packageName] is deprecated in favor of autolinking. It will be removed in the next major release.
Autolinking documentation: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
(node:15376) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
error Unknown dependency. Make sure that the package you are trying to link is already installed in your "node_modules" and present in your "package.json" dependencies. Run CLI with --verbose flag for more details.

만약 위 명령어를 실행해도 잘 되지 않는다면 react-native-vector-icons README 를 참고하시기 바랍니다. 설치 방법과 오류 해결 방법이 자세히 나와있습니다.

react-native-vector-icons는 다양한 아이콘을 제공합니다. 첨부한 링크에 들어가서 본인 취향에 따라 다양한 아이콘을 선택해 사용하시면 됩니다. https://oblador.github.io/react-native-vector-icons/

TodoListItem.js에서 react-native-vector-icons import하기

import Icon from 'react-native-vector-icons/AntDesign';

StyleSheet 속성 안에 완료한 목록을 표시해주는 스타일을 추가하기

const styles = StyleSheet.create({
  ...
  completeCircle: {
    marginRight: 20,
    marginLeft: 20,
  },
  strikeText: {
    color: '#bbb',
    textDecorationLine: 'line-through',
  },
  unstrikeText: {
    color: '#29323c',
  },
  buttonContainer: {
    marginVertical: 10,
    marginHorizontal: 10,
  },
});

설정한 스타일을 아이콘과 텍스트에 적용하기 1

const TodoListItem = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity>
        <View style={styles.completeCircle}>
          <Icon name="circledowno" size={30} color="#3143e8" />
        </View>
      </TouchableOpacity>
      <Text style={[styles.text, styles.strikeText]}>
        Items will be shown here
      </Text>
    </View>
  );
};

결과보기 1

이게 정상

나는 비정상

설정한 스타일을 아이콘과 텍스트에 적용하기2 [삭제버튼]

<TouchableOpacity style={styles.buttonContainer}>
    <Text style={styles.buttonText}>
      <Icon name="delete" size={30} color="#e33057" />
    </Text>
</TouchableOpacity>

결과보기 2

이게 정상

나는 비정상

비정상인 이유

모르겠고 지금 하고 있는 것들

1. 설치

npm install --save-dev @types/react-native-vector-icons

2. 설정

android/app/build.gradle에

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

3. 설정

이거 보고 따라하기

react-native link react-native-vector-icons

결국

4시간 동안 씨름했는데 걍 포기하렵니다. 이거 문제 고치는 방법 아시면 제발 알려주세요 real plz