npm 라이브러리 특정 버전설치하기

React & React Native 2018. 11. 23. 21:16

npm 명령어를 사용하여 특정모듈을 설치할경우 특정버전을 설치해야되는 경우가 있다. 


npm install 라이브러리명@버전명




저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

리액트네이티브 react-native-navigation v2 개발환경 설정 (ios) #1  (0) 2018.12.21
리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle)  (0) 2018.11.28
React Native Svg Chart (react-native-svg-charts), React Native Chart  (0) 2018.11.21
undefined is not an object (evaluating '_react.PropTypes.number')  (0) 2018.11.19
React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
블로그 이미지

클라인STR

,

React Native Svg Chart (react-native-svg-charts), React Native Chart

React & React Native 2018. 11. 21. 22:07

React Native 에서 사용할 차트관련 라이브러리를 검색해보던중 react-native-svg-charts 라이브러리를 발견하였다. 



react-native-svg-charts 는 react-native-svg 라이브러리를 사용한다.

react-native-svg 먼저 설치해야된다. 


react-native-svg 설치링크


react-native-svg-charts 테스트하느라 삽질을 워낙많이해서 설치과정을 스샷으로 찍어서 하나하나 설명할까 한다.ㅠㅠ



1) react-native init --version="0.56.0" ProjectName 명령어를 통해 프로젝트를 생성한다. 



2) npm i react-native-svg-charts   설치한다.




3) react-native-svg-charts 라이브러리는 react-native-svg를 사용하므로 해당 라이브러리를 설치하고 링킹한다. 



npm i react-native-svg@6.2.1   6.2.1버전을 설치하고 아래명령어로 linking 한다.


react-native link react-native-svg  


npm  i d3-shape  종속성 설치한다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from 'react'
import { LineChart, YAxis, Grid } from 'react-native-svg-charts'
import { View } from 'react-native'
 
class YAxisExample extends React.PureComponent {
 
    render() {
 
        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
 
        const contentInset = { top: 20, bottom: 20 }
 
        return (
            <View style={{ height: 200, flexDirection: 'row' }}>
                <YAxis
                    data={ data }
                    contentInset={ contentInset }
                    svg={{
                        fill: 'grey',
                        fontSize: 10,
                    }}
                    numberOfTicks={ 10 }
                    formatLabel={ value => `${value}ºC` }
                />
                <LineChart
                    style={{ flex: 1, marginLeft: 16 }}
                    data={ data }
                    svg={{ stroke: 'rgb(134, 65, 244)' }}
                    contentInset={ contentInset }
                >
                    <Grid/>
                </LineChart>
            </View>
        )
    }
 
}
export default YAxisExample;
cs

[YAxisExample.js]



1
2
import YAxisExample from "./YAxisExample";
export default YAxis;
cs

[[App.js]dfdfdfd


참고 : https://github.com/JesperLekland/react-native-svg-charts

https://www.npmjs.com/package/react-native-svg-charts



저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle)  (0) 2018.11.28
npm 라이브러리 특정 버전설치하기  (0) 2018.11.23
undefined is not an object (evaluating '_react.PropTypes.number')  (0) 2018.11.19
React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
블로그 이미지

클라인STR

,

undefined is not an object (evaluating '_react.PropTypes.number')

React & React Native 2018. 11. 19. 20:19

PropTypes 참조가 누락되었거나 잘못된경우 해당에러가 발생한다. 


import PropTypes from 'prop-types'


저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

npm 라이브러리 특정 버전설치하기  (0) 2018.11.23
React Native Svg Chart (react-native-svg-charts), React Native Chart  (0) 2018.11.21
React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
ReactNative flexBox 연습2  (0) 2018.11.16
블로그 이미지

클라인STR

,

React Native Svg 사용하기 (react-native-svg)

React & React Native 2018. 11. 18. 22:52

React Native 에서 D3.js를 사용하기 위해 찾아보던중 react-native-svg 라는걸 알게되었다. 

react-native-svg 는 React Native에서 Svg를 사용할 수 있는 라이브러리이다. 


npm i react-native-svg

프로젝트 폴더에 react-native-svg를 설치한다. 


react-native link react-native-svg

프로젝트에 해당라이브러리를 link 해준다. 



Manual Linking IOS (수동으로 설정할경우 절차, 위에 절차를 거쳤을경우는 따로 해줄필요 없음)


Xcode에서 해당프로젝트를 Open 한다.


Libraries 에서 마우스 오른쪽버튼을 눌르고 Add Files to 프로젝트명 선택한다.


프로젝트명/node_modules/react-native-svg/ios 에서 RNSVG.xcodeproj file 을 선택하여 Add 버튼을 선택한다. 


프로젝트 선택후 Build Phases 탭을선택한후 Link Binary with Libraries 항목에서 + 선택하여  libRNSVG.a 선택한다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import Svg,{
    Circle,
    Ellipse,
    G,
    Text,
    TSpan,
    TextPath,
    Path,
    Polygon,
    Polyline,
    Line,
    Rect,
    Use,
    Image,
    Symbol,
    Defs,
    LinearGradient,
    RadialGradient,
    Stop,
    ClipPath,
    Pattern,
    Mask,
} from 'react-native-svg';
import React, { Component } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');
 
class SvgExample extends Component {
 
    render () {
      return (
        <Svg style={{flex: 1, alignSelf: 'stretch'}} viewBox='0 0 1000 1000'>
        <Rect
          x='50'
          y='50'
          width='900'
          height='900' />
      </Svg>
      )
    }
 
  }
 
  export default SvgExample;
cs


[Sample 예제]


출처 : https://github.com/react-native-community/react-native-svg


저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

React Native Svg Chart (react-native-svg-charts), React Native Chart  (0) 2018.11.21
undefined is not an object (evaluating '_react.PropTypes.number')  (0) 2018.11.19
ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
ReactNative flexBox 연습2  (0) 2018.11.16
ReactNative flexBox 연습1  (0) 2018.11.15
블로그 이미지

클라인STR

,

ReactNative flexBox 소스 컴포넌트 분리

React & React Native 2018. 11. 17. 18:55

앞에서 연습한 소스를 NavBar, Body를 컴포넌트로 나눌 수 있다.


style.js 파일을 생성하여 css별로 파일로 생성한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from "react";
import { StyleSheet } from "react-native";
 
 
const styles = StyleSheet.create({
    container : {
     flex : 1 ,
     flexDirection: 'column'
    },
    body : {
     flex : 1,
     flexDirection : 'row'
    },
    left : {
        flex : 1,
        backgroundColor : 'red'       
    },
    right : {
        flex : 2 ,
        flexDirection : 'column'
        
    },
    rightTop : {
         flex : 1,
         backgroundColor : 'blue'
    },
    rightBottom : {
         flex : 1 , 
         backgroundColor : 'yellow'
    },navBar : {
         //flex : 1,       
         height : 60,
         justifyContent : 'center',
         alignItems : 'center',
         backgroundColor : 'gray'
    }
 });
 
export default styles;
cs

[style.js]



NavBar 영역부분만 render링 영역으로 잡는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
 
class NavBar extends Component {
    render() {
      return (
        <View style={styles.navBar}>
            <Text>
                NavBar
            </Text>
        </View>
      )
    };
}
 
export default NavBar;
cs

[NavBar.js]


Body 영역 render  영역으로 잡는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
 
class Body extends Component {
    render() {
      return (
        <View style={styles.body}>
            <View style={styles.left}>
            </View>
            <View style={styles.right}>
                <View style={styles.rightTop}>
                </View>
                <View style={styles.rightBottom}>
                </View>
            </View>
        </View>
      )
    };
}
 
export default Body;
cs

[Body.js]




Body, NavBar import를 추가하여 컴포넌트 형태로 호출한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
import Body from "./Body";
import NavBar from "./NavBar";
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           <View style={styles.container}>
                <NavBar />
                <Body />
           </View>           
        );
    }
 
}
 
export default FlexBox1;
cs

[FlexBox1.js]


참초 : 한빛미디어 리엑트 네이티브 듀토리얼 



저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

undefined is not an object (evaluating '_react.PropTypes.number')  (0) 2018.11.19
React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
ReactNative flexBox 연습2  (0) 2018.11.16
ReactNative flexBox 연습1  (0) 2018.11.15
리액트란? (React)  (0) 2018.10.21
블로그 이미지

클라인STR

,

ReactNative flexBox 연습2

React & React Native 2018. 11. 16. 22:42


NavBar 헤더를추가해보자.

기존의 Container영역을 기준으로 헤더영역과 바디 영역으로 나눌 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
class FlexBox1 extends Component {
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.navBar}>
                </View>
                <View style={styles.body}>
                    <View style={styles.left}>
                    </View>
                    <View style={styles.right}>
                        <View style={styles.rightTop}>
                        </View>
                        <View style={styles.rightBottom}>
                        </View>
                    </View>
                </View>               
            </View>
        );
    }
}
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'column'
   },
   body : {
    flex : 1,
    flexDirection : 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   },navBar : {
        flex : 1,       
    //    height : 60,
       backgroundColor : 'gray'
   }
});
export default FlexBox1;
cs


여기서 주요하게 봐야될것들은 container, body ,right에 flexDirecton 설정이다.  Container 기준으로 NavBar ,body는 column 기준으로 정렬되어야 된다.

body를 기준으로 왼쪽 (red), 오른쪽 (blue, yellow) row방향으로 정렬되어있다.

right기준으로 blue, yellow column 방향으로 정렬되어야 된다.


    navBar : {

               
       height : 60,
       backgroundColor : 'gray'
   }


navBar flex 속성을 삭제하고 , height 값을 60으로 준다. 


Text속성을 입력하면 navBar 글자가 왼쪽정렬이 된다. align-items는 부모 컨테이너를 기준으로 항목의 가로 정렬을 제어한다. align-items center 정렬로 한다.

세로정렬을 하기위해서 , justify-content 속성을 center 준다.

left 빨간영역이 줄어들어야되므로 right flex 값을 2로 조정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
 
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.navBar}>
                    <Text>
                        NavBar
                    </Text>
                </View>
            <View style={styles.body}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                    <View style={styles.rightTop}>
                    </View>
                    <View style={styles.rightBottom}>
                    </View>
                </View>
            </View>
               
            </View>
        );
    }
 
}
 
 
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'column'
   },
   body : {
    flex : 1,
    flexDirection : 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 2 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   },navBar : {
        //flex : 1,       
        height : 60,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'gray'
   }
});
 
export default FlexBox1;
cs


참초 : freecodecamp.org

            한빛미디어 리엑트 네이티브 듀토리얼 


저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
ReactNative flexBox 연습1  (0) 2018.11.15
리액트란? (React)  (0) 2018.10.21
TouchableOpacity  (0) 2018.10.18
블로그 이미지

클라인STR

,

ReactNative flexBox 연습1

React & React Native 2018. 11. 15. 23:31


해당레이아웃을 만드는 연습을 해보았다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
class FlexBox1 extends Component {
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1,
       backgroundColor : 'blue'
   }
});
 
cs


세로로 2등분으로 되게끔 레이아웃을 나누어보았다. 


Blue 영역을 컬럼기준으로 1/2 나눠야 되므로 View 영역을 right 를 기준으로 자식 앨리먼트를 2개 셍성한다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
 
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                    <View style={styles.rightTop}>
                    </View>
                    <View style={styles.rightBottom}>
                    </View>
                </View>
            </View>
        );
    }
 
}
 
 
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   }
});
 
export default FlexBox1;
cs


참조 : 리액트 네이티브 튜토리얼 (리얼한빛)


'React & React Native ' 카테고리의 다른 글

ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
ReactNative flexBox 연습2  (0) 2018.11.16
리액트란? (React)  (0) 2018.10.21
TouchableOpacity  (0) 2018.10.18
react-native 특정버전으로 프로젝트 생성하기  (0) 2018.10.17
블로그 이미지

클라인STR

,

리액트란? (React)

React & React Native 2018. 10. 21. 22:02

리액트는 Facebook의 소프트웨어 엔지니어 인 Jordan Walke에 의해 만들어진 자바스크립트 라이브러리이다. 



리액트의 특징 


  • 속성 (Props)은 부모 구성 요소에서 Component로 전달된다. 이때 컴포넌트는 하나의 불변값의 집합이다. (immutable values)
  • 상태는(State) 컴포넌트 전체에서 값을 보유하며 Props 통해 하위 컴포넌트로 전달 될 수 있다.
  • Virtual DOM 을 사용한다. React는 메모리 내 데이터 구조 캐시를 만들고 결과 차이점을 계산 한 다음 브라우저의 표시된 DOM을 효율적으로 업데이트 한다.
  • 라이프 사이클 메소드는 컴포넌트의 수명 동안 설정 포인트에서 코드를 실행할 수 있도록 해준다.
  • JSX (JavaScript eXtension)는 JavaScript 언어 구문을 확장 한것이다. JSX는 HTML과 모양이 비슷하여 많은 개발자에게 익숙한 구문을 사용하여 구성 요소 렌더링을 구조화하는 방법을 제공한다.


참고

https://en.wikipedia.org/wiki/React_(JavaScript_library)#cite_note-12

'React & React Native ' 카테고리의 다른 글

ReactNative flexBox 연습2  (0) 2018.11.16
ReactNative flexBox 연습1  (0) 2018.11.15
TouchableOpacity  (0) 2018.10.18
react-native 특정버전으로 프로젝트 생성하기  (0) 2018.10.17
FlexBox 레이아웃이란? (2)  (0) 2018.10.17
블로그 이미지

클라인STR

,

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바