리액트 네이티브 react-native 투두 앱 만들기 / css / 그림자 - 안드로이드 vs. 아이폰

 

 

https://nomad-academy.teachable.com/courses/261376/lectures/4057048

투두 앱 만들기!!!

 

여기서는 배경을 단색으로 하지만 나는 그라데이션 주고 싶어서 

저번에 배운대로 했는데 오류가 났다.

 

import {LinearGradient} from 'expo-linear-gradient';

 

<LinearGradient colors={['#ff9966', '#ff5e62']} style={styles.container}>

오류

 Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

 

이거는 리액트 네이티브에서 사용하는 그라디언트 문제라길래 다시 엑스포로 바꿨더니 (그전에 리액트네이티브 그라디언트로 바꿨었다) 다른 오류

 

Unable to load script. Make sure you’re either running a Metro server (run react-native start)

 

다시 

yarn add react-native-linear-gradient

npx pod-install

 

import LinearGradient from 'react-native-linear-gradient';

<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>

 

yarn start --reset-cache

react-native run-android 

 

이제 나온다!!!

 

npx pod-install을 안해서였나?

아무튼,,

 

하다가 중간중간 안뜨는건 --reset-cache 해가면서 하면 된다.

캐시때문인지 뭐가 무거운지 리프레시 해도 안뜰때가 많다. 

 

-

그림자 주는 법은 안드로이드/ios 갈림

 

import {  Platform } from 'react-native';

 

    ...Platform.select({

      ios: {

        shadowColor: 'rgba(50,50,50)',

        shadowOpacity: 0.5,

        shadowRadius: 5,

        shadowOffset: {

          height: -1, //쉐도우가 위에 있는 것

          width: 0,

        },

      },

      android: {

        elevation: 3,

      },

    }),

 

그럴 땐 이렇게 플랫폼.셀렉트 해서 각자 스타일 줘야함 

-

  input: {

    padding: 20,

    borderBottomColor: '#bbb',

    borderBottomWidth: StyleSheet.hairlineWidth,

  },

 

StyleSheet.hairlineWidth //이렇게 하면 되게 얇은 줄이 생긴다 (너무 얇아서 1로 교체) 

-

TouchableOpacity 누를 때마다 state 값 이전과 반대로 주기 (false, true)

 

          <View style={[styles.circle, isCompleted ? styles.completedCircle : styles.uncompletedCircle]} />

 

  _toggleComplete = () => {

    this.setState((prevState) => {

      return {

        isCompleted: !prevState.isCompleted,

      };

    });

  };

 

circle: {

    width: 30,

    height: 30,

    borderRadius: 15,

    marginRight: 12,

    marginTop: 3,

    marginLeft: 5,

  },

  completedCircle: {

    backgroundColor: '#bbb',

  }, 

  uncompletedCircle: {

    borderColor: 'orange',

    borderWidth: 3,

  },

-

취소선 

    textDecorationLine: 'line-through',

-

 

여기서 연필이랑 엑스 주변까지 다 누르면 클릭되게 하려면 마진을 줘야함 

 

  actionContainer: {

      marginVertical: 10,

      marginHorizontal: 10,

  }

 

 

-

근데 연필 눌러서 체크 표시 되게 하는건 되는데 체크 표시 눌러서 연필 되게 하는거는 단순히 

!prevState.isCompleted로 안돼서 그냥 false를 줬다.

 

  _startEditing = () => {

    this.setState((prevState) => {

      return {

        isEditing: !prevState.isCompleted,

      };

    });

  };

  _finishEditing = () => {

    this.setState((prevState) => {

      return {

        isEditing: false, // 여기는 왜 !prevState.isCompleted,가 안될까? 

      };

    });

  };

-