TigerCow.Door


이전글

리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1)

리액트 네이티브 #5_ 인스타그램(Instagram) UI 무작정 따라하기 (2)

리액트 네이티브 #6_ 인스타그램(Instagram) UI 무작정 따라하기 (3)

리액트 네이티브 #7_ 인스타그램(Instagram) UI 무작정 따라하기 (4)


Github

https://github.com/doorBW/INSTA-by-react-native



안녕하세요. 문범우입니다.

지난 포스팅을 통해 우리는 인스타그램에서 프로필화면의 상단부까지 UI를 따라해보았습니다.


이번 포스팅에서는, 프로필화면에서 하단 네개의 버튼을 구성하고, 네개의 버튼중 두개에 대해서 화면구성을 완성해보도록 하겠습니다.


제가 1편에서 소개해드렸던 영상의 강의는 해당 포스팅까지 입니다.

이후로 지속되는 인스타그램 UI따라하기는, 제가 개인적으로 공부하면서 정리하여 올릴 생각입니다.

영상을 참고했던 이전의 내용들보다 구성이나, 완성도가 떨어질 수 있으나 최선을 다해보도록 하겠습니다 :)


오늘 포스팅을 통해 완성되는 화면은 다음과 같습니다.




그럼 먼저 프로필 화면의 하단을 구현하기전에 간단히 살펴보면, 4가지 버튼이 있는 View와 그 아래 각 버튼에 따라 내용이 나타나는 View로 나누어볼 수 있습니다.

그럼 먼저 버튼을 구성하는 View를 만들어 보도록 하겠습니다.


기존의 Content 태그 내에서 지난번에 작성이 완료된 View 밖에 새로운 View를 만들고, 그 내부에 2개의 View를 만듭니다. (하나는 버튼이 있는 View, 하나는 내용이 있는 View)

먼저 첫번째 View를 아래와 같이 채워줍니다.


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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image
    } from 'react-native';
import { Icon, Container, Content, Header, Left, Body, Right, Button } from 'native-base';
class ProfileTab extends Component{
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='person' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style={{flex:1, backgroundColor:'white'}}>
                <Header>
                    <Left style={{flexDirection:'row', alignItems:'center'}}>
                        <Text style={{fontWeight:'bold', fontSize:17}}>tigercow.door</Text>
                        <Icon name='caret-down' type='FontAwesome' style={{paddingLeft:10, fontSize:14}}/>
                    </Left>
                    <Right style={{flexDirection:'row', alignItems:'center'}}>
                        <Icon name='back-in-time' type='Entypo' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='user-plus' type='Feather' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='dots-vertical' type='MaterialCommunityIcons' style={{fontSize:23}}/>
                    </Right>
                </Header>
                <Content>
                    <View style={{paddingTop:10}}>
                        <View style={{flexDirection:'row'}}>
                            <View style={{flex:1, alignItems:'center'}}>
                                <Image source={require('../../assets/beomwoo.jpeg')}
                                style={{width:75, height:75, borderRadius:37.5}}/>
                            </View>
                            <View style={{flex:3}}>
                                <View style={{flexDirection:'row', justifyContent:'space-around'}}>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>167</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>게시물</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>346</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로워</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>192</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로잉</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Button bordered dark
                                    style={{flex:1, justifyContent:'center', height:30, marginHorizontal:10, marginTop:10}}>
                                        <Text>프로필 수정</Text>
                                    </Button>
                                </View>
                            </View>
                        </View>
                        <View style={{paddingHorizontal:10, paddingVertical:10}}>
                            <Text style={{fontWeight:'bold'}}>범우[25:?]</Text>
                            <Text> React-Native로</Text>
                            <Text> Instagram UI 따라하기!!!</Text>
                        </View>
                    </View>
 
                    {/* 하단 */}
                    <View>
                        <View style={{flexDirection:'row', justifyContent:'space-around', borderTopWidth:1,borderTopColor:'#eae5e5'}}>
                            <Button transparent><Icon name='ios-apps-outline'/></Button>
                            <Button transparent><Icon name='ios-list-outline'/></Button>
                            <Button transparent><Icon name='ios-people-outline'/></Button>
                            <Button transparent><Icon name='ios-bookmark-outline'/></Button>
                        </View>
                        <View>
 
                        </View>
                    </View>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


69번줄 ~ 74번줄을 보시면 첫번째 View태그 내부에 4개의 버튼이 들어간 것을 볼 수 있습니다. 또한 해당 View 태그에 대해 몇가지 속성을 추가하였습니다.

추가적으로 각 버튼을 눌렀을때, 눌린 버튼이 하이라이팅 되는 효과를 추가해보도록 하겠습니다.


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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image
    } from 'react-native';
import { Icon, Container, Content, Header, Left, Body, Right, Button } from 'native-base';
class ProfileTab extends Component{
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='person' style={{color:tintColor}} />
        )
    }
    constructor(props){
        super(props)
 
        this.state = {
            activeIndex: 0
        };
    }
 
    segmentClicked=(index)=>{
        this.setState({
            activeIndex: index
        })
    }
    
    render(){
        return (
            <Container style={{flex:1, backgroundColor:'white'}}>
                <Header>
                    <Left style={{flexDirection:'row', alignItems:'center'}}>
                        <Text style={{fontWeight:'bold', fontSize:17}}>tigercow.door</Text>
                        <Icon name='caret-down' type='FontAwesome' style={{paddingLeft:10, fontSize:14}}/>
                    </Left>
                    <Right style={{flexDirection:'row', alignItems:'center'}}>
                        <Icon name='back-in-time' type='Entypo' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='user-plus' type='Feather' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='dots-vertical' type='MaterialCommunityIcons' style={{fontSize:23}}/>
                    </Right>
                </Header>
                <Content>
                    <View style={{paddingTop:10}}>
                        <View style={{flexDirection:'row'}}>
                            <View style={{flex:1, alignItems:'center'}}>
                                <Image source={require('../../assets/beomwoo.jpeg')}
                                style={{width:75, height:75, borderRadius:37.5}}/>
                            </View>
                            <View style={{flex:3}}>
                                <View style={{flexDirection:'row', justifyContent:'space-around'}}>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>167</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>게시물</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>346</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로워</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>192</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로잉</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Button bordered dark
                                    style={{flex:1, justifyContent:'center', height:30, marginHorizontal:10, marginTop:10}}>
                                        <Text>프로필 수정</Text>
                                    </Button>
                                </View>
                            </View>
                        </View>
                        <View style={{paddingHorizontal:10, paddingVertical:10}}>
                            <Text style={{fontWeight:'bold'}}>범우[25:?]</Text>
                            <Text> React-Native로</Text>
                            <Text> Instagram UI 따라하기!!!</Text>
                        </View>
                    </View>
 
                    {/* 하단 */}
                    <View>
                        <View style={{flexDirection:'row', justifyContent:'space-around', borderTopWidth:1,borderTopColor:'#eae5e5'}}>
                            <Button transparent onPress={()=>this.segmentClicked(0)} active={this.state.activeIndex == 0}>
                                <Icon name='ios-apps-outline' style={[this.state.activeIndex == 0 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(1)} active={this.state.activeIndex == 1}>
                                <Icon name='ios-list-outline' style={[this.state.activeIndex == 1 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(2)} active={this.state.activeIndex == 2}>
                                <Icon name='ios-people-outline' style={[this.state.activeIndex == 2 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(3)} active={this.state.activeIndex == 3}>
                                <Icon name='ios-bookmark-outline' style={[this.state.activeIndex == 3 ? {} : {color:'grey'}]}/>
                            </Button>
                        </View>
                        <View>
 
                        </View>
                    </View>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


react 자체적인 문법이 약간 사용되는데, 크게 어렵지 않으니 이해하실 수 있을 것 입니다. 먼저 15번줄 ~ 27번줄을 보시면 constructor와 하나의 함수가 정의되어 있습니다. 먼저 constructor에서 state에 activeIndex라는 요소를 지정해주었고 그 초기값은 0으로 두었습니다. 그리고 segmentClicked 함수에서는 클릭되는 요소의 인덱스에 따라서 activeIndex를 바꾸어주는 함수입니다.


그리고 각 버튼을 다시 확인해보면, onPress와 active 속성을 추가해주었습니다. 해당 버튼이 눌렸을때 해당 인덱스를 함수로 전달하여 activeIndex를 변하게끔하고 해당 버튼이 눌려있을때 그 activeIndex값을 유지하도록 합니다.

그리고 내부의 아이콘에 style을 추가해주는데, 현재의 activeIndex와 일치할때는 본래의 색을 내지만 그것이 아닐때는 회색을 갖도록 하였습니다.


이제 4개의 버튼 하단에 있는 내용에 대해서 구성해보도록 하겠습니다.

해당 내용은 단순히 고정된 정보를 보여주는 것이 아니라, 방금 저희가 구현한 4개의 버튼에서 어떤 것이 선택되어 있는지에 따라 보여지는 것이 다릅니다.

따라서 이 또한 함수를 이용해서 내용을 보여주도록 합니다.


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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image
    } from 'react-native';
import { Icon, Container, Content, Header, Left, Body, Right, Button } from 'native-base';
class ProfileTab extends Component{
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='person' style={{color:tintColor}} />
        )
    }
    constructor(props){
        super(props)
 
        this.state = {
            activeIndex: 0
        };
    }
 
    segmentClicked=(index)=>{
        this.setState({
            activeIndex: index
        })
    }
 
    renderSection = () =>{
        if (this.state.activeIndex == 0){
            return(
                <View><Text>this is first section</Text></View>
            )
        }
    }
    
    render(){
        return (
            <Container style={{flex:1, backgroundColor:'white'}}>
                <Header>
                    <Left style={{flexDirection:'row', alignItems:'center'}}>
                        <Text style={{fontWeight:'bold', fontSize:17}}>tigercow.door</Text>
                        <Icon name='caret-down' type='FontAwesome' style={{paddingLeft:10, fontSize:14}}/>
                    </Left>
                    <Right style={{flexDirection:'row', alignItems:'center'}}>
                        <Icon name='back-in-time' type='Entypo' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='user-plus' type='Feather' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='dots-vertical' type='MaterialCommunityIcons' style={{fontSize:23}}/>
                    </Right>
                </Header>
                <Content>
                    <View style={{paddingTop:10}}>
                        <View style={{flexDirection:'row'}}>
                            <View style={{flex:1, alignItems:'center'}}>
                                <Image source={require('../../assets/beomwoo.jpeg')}
                                style={{width:75, height:75, borderRadius:37.5}}/>
                            </View>
                            <View style={{flex:3}}>
                                <View style={{flexDirection:'row', justifyContent:'space-around'}}>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>167</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>게시물</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>346</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로워</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>192</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로잉</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Button bordered dark
                                    style={{flex:1, justifyContent:'center', height:30, marginHorizontal:10, marginTop:10}}>
                                        <Text>프로필 수정</Text>
                                    </Button>
                                </View>
                            </View>
                        </View>
                        <View style={{paddingHorizontal:10, paddingVertical:10}}>
                            <Text style={{fontWeight:'bold'}}>범우[25:?]</Text>
                            <Text> React-Native로</Text>
                            <Text> Instagram UI 따라하기!!!</Text>
                        </View>
                    </View>
 
                    {/* 하단 */}
                    <View>
                        <View style={{flexDirection:'row', justifyContent:'space-around', borderTopWidth:1,borderTopColor:'#eae5e5'}}>
                            <Button transparent onPress={()=>this.segmentClicked(0)} active={this.state.activeIndex == 0}>
                                <Icon name='ios-apps-outline' style={[this.state.activeIndex == 0 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(1)} active={this.state.activeIndex == 1}>
                                <Icon name='ios-list-outline' style={[this.state.activeIndex == 1 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(2)} active={this.state.activeIndex == 2}>
                                <Icon name='ios-people-outline' style={[this.state.activeIndex == 2 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(3)} active={this.state.activeIndex == 3}>
                                <Icon name='ios-bookmark-outline' style={[this.state.activeIndex == 3 ? {} : {color:'grey'}]}/>
                            </Button>
                        </View>
                        <View>
                            {this.renderSection()}
                        </View>
                    </View>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


먼저, 105번줄을 보시면 해당 내용은 renderSection()이라는 함수를 통해서 보여지도록 하고 있습니다.

그리고 29번줄 ~ 35번줄을 보시면 renderSection() 함수에 대해서 나와 있습니다.

우리가 위에서 어떤 버튼이 눌려있는지 activeIndex를 통해서 확인했기 때문에, 동일하게 해당 값을 통해서 어떤 버튼이 눌려있는지 확인하고 그에 맞는 내용을 반환하도록 할 것 입니다.


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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image,
    Dimensions
    } from 'react-native';
import { Icon, Container, Content, Header, Left, Body, Right, Button } from 'native-base';
 
var images=[
    require('../../assets/1.jpg'),
    require('../../assets/2.jpg'),
    require('../../assets/3.jpg'),
    require('../../assets/4.jpg'),
    require('../../assets/5.jpg'),
    require('../../assets/6.jpeg'),
    require('../../assets/7.jpg'),
    require('../../assets/beomwoo.jpeg'),
    require('../../assets/deep_learning.png'),
    require('../../assets/python.jpg')
]
 
var {width,height} = Dimensions.get('window')
class ProfileTab extends Component{
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='person' style={{color:tintColor}} />
        )
    }
    constructor(props){
        super(props)
 
        this.state = {
            activeIndex: 0
        };
    }
 
    segmentClicked=(index)=>{
        this.setState({
            activeIndex: index
        })
    }
 
    renderSectionOne = () => {
        return images.map((image,index) => {
            return (
                <View key={index} style={[{width:(width)/3}, {height:(width)/3}]}>
                    <Image style={{flex:1, width:undefined, height:undefined}}
                    source = {image}
                    />
                </View>
            )
        })
    }
 
    renderSection = () =>{
        if (this.state.activeIndex == 0){
            return(
                <View style={{flexDirection:'row', flexWrap:'wrap'}}>
                    {this.renderSectionOne()}
                </View>
            )
        }
    }
 
    
    
    render(){
        return (
            <Container style={{flex:1, backgroundColor:'white'}}>
                <Header>
                    <Left style={{flexDirection:'row', alignItems:'center'}}>
                        <Text style={{fontWeight:'bold', fontSize:17}}>tigercow.door</Text>
                        <Icon name='caret-down' type='FontAwesome' style={{paddingLeft:10, fontSize:14}}/>
                    </Left>
                    <Right style={{flexDirection:'row', alignItems:'center'}}>
                        <Icon name='back-in-time' type='Entypo' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='user-plus' type='Feather' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='dots-vertical' type='MaterialCommunityIcons' style={{fontSize:23}}/>
                    </Right>
                </Header>
                <Content>
                    <View style={{paddingTop:10}}>
                        <View style={{flexDirection:'row'}}>
                            <View style={{flex:1, alignItems:'center'}}>
                                <Image source={require('../../assets/beomwoo.jpeg')}
                                style={{width:75, height:75, borderRadius:37.5}}/>
                            </View>
                            <View style={{flex:3}}>
                                <View style={{flexDirection:'row', justifyContent:'space-around'}}>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>167</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>게시물</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>346</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로워</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>192</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로잉</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Button bordered dark
                                    style={{flex:1, justifyContent:'center', height:30, marginHorizontal:10, marginTop:10}}>
                                        <Text>프로필 수정</Text>
                                    </Button>
                                </View>
                            </View>
                        </View>
                        <View style={{paddingHorizontal:10, paddingVertical:10}}>
                            <Text style={{fontWeight:'bold'}}>범우[25:?]</Text>
                            <Text> React-Native로</Text>
                            <Text> Instagram UI 따라하기!!!</Text>
                        </View>
                    </View>
 
                    {/* 하단 */}
                    <View>
                        <View style={{flexDirection:'row', justifyContent:'space-around', borderTopWidth:1,borderTopColor:'#eae5e5'}}>
                            <Button transparent onPress={()=>this.segmentClicked(0)} active={this.state.activeIndex == 0}>
                                <Icon name='ios-apps-outline' style={[this.state.activeIndex == 0 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(1)} active={this.state.activeIndex == 1}>
                                <Icon name='ios-list-outline' style={[this.state.activeIndex == 1 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(2)} active={this.state.activeIndex == 2}>
                                <Icon name='ios-people-outline' style={[this.state.activeIndex == 2 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(3)} active={this.state.activeIndex == 3}>
                                <Icon name='ios-bookmark-outline' style={[this.state.activeIndex == 3 ? {} : {color:'grey'}]}/>
                            </Button>
                        </View>
                        <View>
                            {this.renderSection()}
                        </View>
                    </View>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


renderSection에서 첫번째 버튼이 눌렸을때 보여주고자 하는 것은 다수의 이미지 입니다. 먼저 이러한 이미지를 위해 11번줄 ~ 22번줄과 같이 여러개의 이미지를 불러왔습니다. 그리고 각각의 이미지를 알맞게 보여주도록하기 위해 새로운 renderSectionOne 함수를 만들었습니다.

45번줄 ~ 55번줄을 보시면 해당 함수에 대해서 코드가 작성되어 있습니다.

map함수를 통해 images에 있는 각각의 이미지에 대해 모두 처리하도록 하여 많은 이미지를 보다 쉽게 설정할 수 있습니다.

각각의 이미지의 크기는 사용자의 핸드폰 화면의 1/3 정도의 크기를 가지는데 이를 위해서 최상단에 Dimensions라는 것을 Import하여 24번줄과 같이 사용자의 화면 크기를 받아왔고, 이를 통해 각 이미지의 가로, 세로를 설정하였습니다.


마지막으로, 각 이미지간에 존재하는 약간의 경계를 설정하고, 두번째 버튼을 눌렀을때 나오는 화면을 구성해보도록 합니다.


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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image,
    Dimensions
    } from 'react-native';
import { Icon, Container, Content, Header, Left, Body, Right, Button } from 'native-base';
import CardCompnent from '../CardComponent';
 
var images=[
    require('../../assets/1.jpg'),
    require('../../assets/2.jpg'),
    require('../../assets/3.jpg'),
    require('../../assets/4.jpg'),
    require('../../assets/5.jpg'),
    require('../../assets/6.jpeg'),
    require('../../assets/7.jpg'),
    require('../../assets/beomwoo.jpeg'),
    require('../../assets/deep_learning.png'),
    require('../../assets/python.jpg')
]
 
var {width,height} = Dimensions.get('window')
class ProfileTab extends Component{
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='person' style={{color:tintColor}} />
        )
    }
    constructor(props){
        super(props)
 
        this.state = {
            activeIndex: 0
        };
    }
 
    segmentClicked=(index)=>{
        this.setState({
            activeIndex: index
        })
    }
 
    renderSectionOne = () => {
        return images.map((image,index) => {
            return (
                <View key={index} style={[{width:(width)/3}, {height:(width)/3}, index % 3 !== 0 ? {paddingLeft:2}:{paddingLeft:0},{marginBottom:2}]}>
                    <Image style={{flex:1, width:undefined, height:undefined}}
                    source = {image}
                    />
                </View>
            )
        })
    }
 
    renderSection = () =>{
        if (this.state.activeIndex == 0){
            return(
                <View style={{flexDirection:'row', flexWrap:'wrap'}}>
                    {this.renderSectionOne()}
                </View>
            )
        }
        else if(this.state.activeIndex == 1){
            return(
                <View>
                <CardCompnent imageSource='1' likes='100'/>
                <CardCompnent imageSource='2' likes='36'/>
                <CardCompnent imageSource='3' likes='240'/>
                </View>
            )
        }
    }
 
    
    
    render(){
        return (
            <Container style={{flex:1, backgroundColor:'white'}}>
                <Header>
                    <Left style={{flexDirection:'row', alignItems:'center'}}>
                        <Text style={{fontWeight:'bold', fontSize:17}}>tigercow.door</Text>
                        <Icon name='caret-down' type='FontAwesome' style={{paddingLeft:10, fontSize:14}}/>
                    </Left>
                    <Right style={{flexDirection:'row', alignItems:'center'}}>
                        <Icon name='back-in-time' type='Entypo' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='user-plus' type='Feather' style={{paddingRight:10, fontSize:23}}/>
                        <Icon name='dots-vertical' type='MaterialCommunityIcons' style={{fontSize:23}}/>
                    </Right>
                </Header>
                <Content>
                    <View style={{paddingTop:10}}>
                        <View style={{flexDirection:'row'}}>
                            <View style={{flex:1, alignItems:'center'}}>
                                <Image source={require('../../assets/beomwoo.jpeg')}
                                style={{width:75, height:75, borderRadius:37.5}}/>
                            </View>
                            <View style={{flex:3}}>
                                <View style={{flexDirection:'row', justifyContent:'space-around'}}>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>167</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>게시물</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>346</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로워</Text>
                                    </View>
                                    <View style={{alignItems:'center'}}>
                                        <Text style={{fontSize:17, fontWeight:'bold'}}>192</Text>
                                        <Text style={{fontSize:12, color:'gray'}}>팔로잉</Text>
                                    </View>
                                </View>
                                <View style={{flexDirection:'row'}}>
                                    <Button bordered dark
                                    style={{flex:1, justifyContent:'center', height:30, marginHorizontal:10, marginTop:10}}>
                                        <Text>프로필 수정</Text>
                                    </Button>
                                </View>
                            </View>
                        </View>
                        <View style={{paddingHorizontal:10, paddingVertical:10}}>
                            <Text style={{fontWeight:'bold'}}>범우[25:?]</Text>
                            <Text> React-Native로</Text>
                            <Text> Instagram UI 따라하기!!!</Text>
                        </View>
                    </View>
 
                    {/* 하단 */}
                    <View>
                        <View style={{flexDirection:'row', justifyContent:'space-around', borderTopWidth:1,borderTopColor:'#eae5e5'}}>
                            <Button transparent onPress={()=>this.segmentClicked(0)} active={this.state.activeIndex == 0}>
                                <Icon name='ios-apps-outline' style={[this.state.activeIndex == 0 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(1)} active={this.state.activeIndex == 1}>
                                <Icon name='ios-list-outline' style={[this.state.activeIndex == 1 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(2)} active={this.state.activeIndex == 2}>
                                <Icon name='ios-people-outline' style={[this.state.activeIndex == 2 ? {} : {color:'grey'}]}/>
                            </Button>
                            <Button transparent onPress={()=>this.segmentClicked(3)} active={this.state.activeIndex == 3}>
                                <Icon name='ios-bookmark-outline' style={[this.state.activeIndex == 3 ? {} : {color:'grey'}]}/>
                            </Button>
                        </View>
                        <View>
                            {this.renderSection()}
                        </View>
                    </View>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


49번줄의 style을 보시면, paddingLeft는 요소가 몇번째에 위치해있는지에 따라 값을 주거나, 안주는 것으로 설정하였고 marginBottom은 모든 이미지에게 2라는 값을 주었습니다.


이렇게되면 첫번째 버튼을 눌렀을때의 화면이 잘 나오고, 두번째 버튼은 우리가 지난번에 만든 CardComponent를 이용하여 66번줄 ~ 74번줄과 같이 작성하면 완성됩니다.


블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


지난글

리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1)

리액트 네이티브 #5_ 인스타그램(Instagram) UI 무작정 따라하기 (2)


Github

https://github.com/doorBW/INSTA-by-react-native



안녕하세요. 문범우입니다. 

지난 포스팅에서는 Home 화면에 피드를 추가하는 과정까지 진행해보았습니다.


이번 포스팅에서는 Home 화면에서 상단에 있는 스토리바를 추가해보도록 하겠습니다.

해당 포스트를 통해서 나오는 결과물은 아래와 같습니다.



1. 스토리바 만들기


우리는 스토리바를 추가하기 위해 HomeTab.js 에서 작업을 진행합니다.

이전 포스팅을 통해 현재 HomeTab.js의 코드는 아래와 같습니다.


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, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
import { Icon, Container, Content } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


이제 스토리바를 추가해 볼건데, 먼저 스토리바의 위치와 형태를 잡아보도록 하겠습니다.

스토리바는 Content 태그 안에 위치하며 CardComponent보다 위에 존재합니다.

따라서 위의 코드에서 22번줄과 23번줄 사이에 코드를 작성하는 것으로 시작합니다.

<View> 태그로 기준을 잡고, '스토리' 와 '모두 보기' 텍스트를 아래와 같이 넣어줍니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
import { Icon, Container, Content } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <View>
                        <Text>스토리</Text>
                        <Text>모두 보기</Text>
                    </View>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


위의 코드를 보시면 23번줄 ~ 26번줄에 View태그로 감싸져 있는 것을 볼 수 있고 내부에 Text태그로 '스토리'와 '모두 보기' 두개가 입력된 것을 볼 수 있습니다.


조금 더 구조를 세분화해보도록 하겠습니다.



위와 같이 검은색 테두리로 된 스토리바를 현재 추가하려고 하는데, 이는 또 두개의 View로 나눌 수 있습니다.

현재 두개의 텍스트를 넣어준 파란색 테두리와, 스토리를 올린 사람들의 사진이 보일 빨간색 테두리로 나눌 수 있습니다.

따라서, 우리가 위에서 작성한 두개의 텍스트 태그를 또 다른 View 태그로 묶어주고, 그 아래에 다른 View 태그를 만들어줍니다.

그리고 스토리바 전체를 묶고 있는, 검은색 테두리의 View 태그는 높이를 100으로 지정해주며, 파란색 테두리의 View 태그에 필요한 속성도 설정해줍니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
import { Icon, Container, Content } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <View style={{height:100}}>
                        <View style={{flex:1, flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingHorizontal:7}}>
                            <Text>스토리</Text>
                            <Text>모두 보기</Text>
                        </View>
                        <View>
 
                        </View>
                    </View>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


24번줄의 View 태그가 파란색 테두리로써 '스토리' 와 '모두 보기' 텍스트를 감싸고 있습니다. 이들의 flex는 1로 지정해주고, 가로로 정렬되게 하며 space-between 속성으로 서로 양쪽끝에 오도록 합니다.


이제 빨간색 테두리의 형태를 잡아보도록 하겠습니다.

빨간색 테두리 View는 파란색 테두리보다 커야합니다.

따라서 flex는 3으로 지정합니다. 또한 빨간색 테두리 내부에 들어가는 스토리의 사진들은 가로로 스크롤할 수 있기 때문에, 이를 위해 ScrollView 를 import에 추가해주어야 합니다. 그리고 ScrollView 내부에는 Thumbnail 을 통해 여러개의 이미지를 넣어줍니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView
    } from 'react-native';
import { Icon, Container, Content, Thumbnail } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <View style={{height:100}}>
                        <View style={{flex:1, flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingHorizontal:7}}>
                            <Text>스토리</Text>
                            <Text>모두 보기</Text>
                        </View>
                        <View style={{flex:3}}>
                            <ScrollView>
                                <Thumbnail source={require('../../assets/beomwoo.jpeg')}/>
                                <Thumbnail source={require('../../assets/1.jpg')}/>
                                <Thumbnail source={require('../../assets/2.jpg')}/>
                                <Thumbnail source={require('../../assets/3.jpg')}/>
                                <Thumbnail source={require('../../assets/4.jpg')}/>
                                <Thumbnail source={require('../../assets/5.jpg')}/>
                                <Thumbnail source={require('../../assets/6.jpeg')}/>
                                <Thumbnail source={require('../../assets/7.jpg')}/>
                            </ScrollView>
                        </View>
                    </View>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


29번줄을 보시면 빨간색 테두리 View의 flex를 3으로 설정해준것을 확인할 수 있습니다.

그리고 그 다음에 ScrollView를 사용하기 위해 6번줄과 같이 ScrollView를 import에 추가해주었으며 ScrollView에 여러개의 Thumbnail을 통해 사진을 넣어 주었습니다.

이렇게 하고 시뮬레이터를 확인해보면, 스토리바 위치에 사진들이 여러개 있지만, 사진들이 세로로 정렬되어 있어 이상한 것을 확인할 수 있습니다.

각각의 썸네일의 스타일도 수정해보고, 스토리바의 속성도 설정해보겠습니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView
    } from 'react-native';
import { Icon, Container, Content, Thumbnail } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <View style={{height:100}}>
                        <View style={{flex:1, flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingHorizontal:7}}>
                            <Text>스토리</Text>
                            <Text>모두 보기</Text>
                        </View>
                        <View style={{flex:3}}>
                            <ScrollView 
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                                contentContainerStyle={{
                                    alignItems:'center',
                                    paddingStart:5,
                                    paddingEnd:5
                                }}
                            >
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/beomwoo.jpeg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/1.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/2.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/3.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/4.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/5.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/6.jpeg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/7.jpg')}/>
                                
                            </ScrollView>
                        </View>
                    </View>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


먼저, 30번줄 ~ 38번줄을 보시면 ScrollView에서 몇가지 속성을 설정한 것을 확인할 수 있습니다. 내부의 Thumbnail들이 가로로 정렬하도록 horizontal 을 true로 설정하였고, 스크롤 바가 보이지 않도록 설정하였으며 내부 아이템들의 스타일또한 설정하였습니다.

그리고 각각의 Thumbnail에 모두 동일하게, margin 값을 5로 설정하며 사진의 테두리에 빨간색 선이 있도록 설정해주었습니다.


이렇게까지 하면 어느정도 자리잡은 스토리바의 형태가 보입니다.

마무리로 약간의 수정을 해보도록 하겠습니다.


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
69
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView
    } from 'react-native';
import { Icon, Container, Content, Thumbnail } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <View style={{height:100}}>
                        <View style={{flex:1, flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingHorizontal:7}}>
                            <Text style={{fontWeight:'bold'}}>스토리</Text>
                            <View style={{flexDirection:'row', alignItems:'center'}}>
                                <Icon name='md-play' style={{fontSize:14}}/>
                                <Text style={{fontWeight:'bold'}}>모두 보기</Text>
                            </View>
                        </View>
                        <View style={{flex:3}}>
                            <ScrollView 
                                horizontal={true}
                                showsHorizontalScrollIndicator={false}
                                contentContainerStyle={{
                                    alignItems:'center',
                                    paddingStart:5,
                                    paddingEnd:5
                                }}
                            >
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/beomwoo.jpeg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/1.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/2.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/3.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/4.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/5.jpg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/6.jpeg')}/>
                                <Thumbnail style={{marginHorizontal:5, borderColor:'red', borderWidth:2}} source={require('../../assets/7.jpg')}/>
                                
                            </ScrollView>
                        </View>
                    </View>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


수정된 것은 26번줄 ~ 30번줄 입니다.

먼저, 27번줄 ~ 30번줄을 보시면 하나의 View태그가 추가되어 아까 있던 '모두 보기' 텍스트와 새롭게 Icon 텍스트를 감싸고 있는 것을 볼 수 있습니다.

인스타그램의 모두보기 옆에 아이콘이 있기 때문에 이를 추가해주었고 해당 아이콘과 '모두보기'텍스트를 하나의 View태그로 묶어주면서, 가로정렬 등의 스타일을 수정하였습니다.

또한 각각의 텍스트가 두껍게 보이도록 bold 속성을 추가해주었습니다.


이렇게 하여 만들어진 스토리바를 확인해보면 다음과 같습니다.



블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


안녕하세요. 문범우입니다.

우리가 지금까지 두 차례의 포스팅에 거쳐서, 리액트 네이티브 개발 환경을 구성하는 방법과 리액트 네이티브에서의 아주 기본적인 내용에 대해서 알아보았습니다.

이번 포스팅부터는 실제로 프로젝트를 시작하여 코드를 작성해도록 하겠습니다.


1. 프로젝트 시작하기


먼저 우리는 첫번째 포스팅에서 Expo 를 설치하였습니다.

설치한 Expo를 실행합니다.



위와 같은 기본 화면에서 Create new project를 누릅니다.




위와 같이 둘 중 하나를 고르는 화면과 함께 프로젝트 이름 및 경로를 설정할 수 있는 창이 나옵니다.

일단 우리는 Blank를 선택하여 진행합니다.

Tab Navigation은 추후에 다뤄보도록 하겠습니다.

그리고 적절한 프로젝트 이름과 경로를 설정하여 Create를 누릅니다.


그럼 이제 Expo가 알아서 리액트 네이티브 환경을 가지는 프로젝트를 만들어 줍니다.

프로젝트를 만드는데에는 약간의 시간이 소요되니 잠시 기다리시면 됩니다.



프로젝트가 만들어진 뒤에 위와 같은 창이 뜨면 좌측 창에 아래와 같은 문구가 뜰때까지 대기합니다.



맨 아래에 써진 문구 처럼 이제 우리는 해당 프로젝트를 Device에서 실행시키거나 share를 할 수 있습니다.


일단 실제 핸드폰을 사용하기보다, 우리가 첫번째 포스팅에서 설치했던 시뮬레이터를 사용해보도록 하겠습니다.

저는 iOS를 기본으로 진행하지만, 안드로이드분들께서는 안드로이드 스튜디오를 통해 에뮬레이터를 켜주시면 됩니다.

iOS분들께서는 따로 시뮬레이터를 킬 필요없이 따라오시면 됩니다.


우측상단의 Device 버튼을 눌러서 자신이 키고자 하는 운영체제를 맞게 클릭하시면 됩니다. (안드로이드 분들께서는 스튜디오를 통해 에뮬레이터를 켜놔야 합니다.)



그럼 위와 같이 시뮬레이터가 켜지면서 좌측 창에 무언가 다시 진행되고 있는 것을 보실 수 있습니다. 우리의 프로젝트를 시뮬레이터에 빌드하고 있는 정도의 작업이니, 약간 기다리시면 됩니다.


기다리다 보면, 빌드가 끝나고 시뮬레이터가 아래와 같은 화면을 띄웁니다.


너무나 간편하지 않나요?

단순히 몇번의 클릭만으로 이렇게 프로젝트를 시작하였습니다!



2. 프로젝트 다루기


그럼 이제 실제로 코드를 짜보면서 놀아보도록 하죠!

먼저 자신이 선호하는, 사용하는 텍스트 에디터를 켜서 프로젝트를 만든 경로를 열어봅니다.



저는 위와 같이 VS코드를 이용합니다.

우리가 만든 프로젝트이름의 폴더 안에 App.js 라는 파일이 있습니다.

해당 파일을 열어보도록 하겠습니다.



기본적인 어플이 코드가 작성되어 있습니다.

가운데에 Text태그로 묶인 곳에는 우리가 아까 시뮬레이터에서 봤던 문구가 적혀있네요.

그럼 해당 문구를 약간 바꿔보도록 하겠습니다.



위와 같이 코드를 수정하고 저장을 해보고, 시뮬레이터를 확인해보면!



위와 같이 바로 반영이 된 모습을 볼 수 있습니다.

너무 편리하지 않나요?

이렇게 Expo를 사용하면, 우리가 코드를 수정하고 저장했을 때 이를 인지하여 바로 프로젝트를 다시 불러와줍니다.

이러한 기능을 Expo의 Live Reloading 이라고 합니다.


그런데, 이보다 더 멋있는 기능이 있습니다.

Live Reload는 우리가 프로젝트를 새롭게 저장했을 때, 프로젝트 전체를 시뮬레이터에 새로 불러오는 기능인데, 이와 달리 Hot Reload 기능은, 우리가 수정한, 또는 새롭게 추가한 코드만을 인지하여 그 부분만 새롭게 불러옵니다.


쉽게말해서 Live Reload 보다 빠르게 결과를 확인할 수 있게 되는 것입니다.


이러한 Hot Reload 기능을 사용하기 위해서는, 시뮬레이터 창을 클릭하고, 커맨드+D 를 눌러 아래와 같은 창을 띄우면 됩니다.



위와 같은 창에서, 먼저 Disable Live Reload 를 눌러 Live Reload 기능을 끄고, 다시 커맨드+D로 들어가서, Enable Hot Reloading 을 눌러서 실행시킵니다.


이제 정말로 프로젝트를 좀 더 신나게 다뤄볼 준비가 끝났습니다.!



3. FlexBox


첫 번째로 우리가 프로젝트에서 다뤄볼 내용은 FlexBox입니다.

CSS 등에서 Flex에 대해 배우신분들도 있겠지만 리액트 네이티브에서 사용되는 Flex는 약간 다릅니다.

물론, 개념적으로는 같지만 사용하는 속성이나 값에 있어서 차이가 존재하기 때문에 꼭 한번쯤은 공부해보시는 것이 좋고, 만약 내가 CSS 등을 공부한적이 없어서 Flex가 무엇인지 전혀 모른다는 분들께서는, 간단하게 구글에 검색하여 기본적인 개념정도만 알아보시면 좋을 것 같습니다.


그럼 Flex에 대한 최소의 개념이 있다는 전제하에, 리액트 네이티브에서 제공하는 Flex를 사용해보도록 하겠습니다.


먼저 아래 코드와 같이, 원래 있던 Text를 없애고 두개의 View 컴포넌트를 만들고, 각각 redBox, blackBox 스타일을 만들어서 지정해줍니다.

이때 각 박스의 flex는 1로 설정합니다.


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
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redBox}/>
        <View style={styles.blackBox}/>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  redBox: {
    backgroundColor: 'red',
    flex: 1
  },
  blackBox: {
    backgroundColor: 'black',
    flex: 1
  }
});
 
cs


이렇게 코드를 작성하고 저장하면 아래와 같이 화면이 변하게 됩니다.



화면에서 볼 수 있듯이, 빨간색 박스와 검은색 박스가 서로 1:1 비율로 화면을 차지하고 있는 것을 볼 수 있습니다.

이처럼 flex 속성에 int 값을 넣어줌으로써 화면에서 얼마만큼을 차지할지 비율적으로 설정할 수 있습니다.

예를 들어, 위의 상태에서 빨간색 화면의 flex를 6으로 설정하면 다음과 같습니다.




- flexDirection, justifyContent, alignItems

( https://facebook.github.io/react-native/docs/flexbox.html#docsNav )


우리가 flex와 관련되어 다뤄볼 속성은 위의 3가지 입니다.

아래의 링크는 공식문서이니 참고하시면 좋을 것 같습니다.


먼저 flexDirection은 말그대로 flex의 방향을 설정해줍니다.

우리가 위에서 두개의 박스로 테스트 해보면서 느낌이 오는 것과 같이, 리액트 네이티브에서 flexDirection의 기본 값을 column 입니다. 즉, 컴포넌트들을 기본적으로 세로로 배치합니다.

만약, 가로로 배치하고 싶다면 flexDirection을 row 로 설정해줍니다.


저는 빨간색 박스내부에 흰색박스와 노란색 박스를 가로로 만들어 보도록 하겠습니다.


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
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redBox}>
          <View style={styles.whiteBox}/>
          <View style={styles.yellowBox}/>
        </View>
        <View style={styles.blackBox}/>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  redBox: {
    backgroundColor: 'red',
    flex: 6,
    flexDirection: 'row',
  },
  blackBox: {
    backgroundColor: 'black',
    flex: 1
  },
  whiteBox: {
    backgroundColor: 'white',
    flex: 1
  },
  yellowBox: {
    backgroundColor: 'yellow',
    flex: 1
  }
});
 
cs


위의 코드와 같이, 레드박스에 flexDirection을 row로 설정하고, 그 안에 화이트박스와 옐로우박스를 만들어서 넣었습니다.


그리고 결과는 아래와 같습니다.




그리고 justifyContent는 내부에 있는 컴포넌트들의 기본 축을 중심으로 위치를 잡아주는 것으로써, 아래와 같은 값들을 가질 수 있습니다.


설명

flex-start

flex의 축을 중심으로 처음부터 차례대로 요소를 배치합니다.

center

flex의 축을 중심으로 요소들을 가운데로 배치합니다.

flex-end

flex의 축을 중심으로 요소들을 맨 끝에 배치합니다.

space-around

화면 모서리를 포함한 요소들 서로의 간격을 동일하게 배치합니다.

space-between

화면 모서리를 제외한 요소들 서로의 간격을 동일하게 배치합니다.


실제로 화면에서 View컴포넌트를 만들고, 배경색을 달리해서 확인해보시면 좋을 것 같습니다.


마지막으로 alignItems는 기본 축과 직교되는 위치에 대해 설정하는 속성입니다.

이는 아래와 같은 값들을 가질 수 있습니다.


설명

flex-start

기본 축과 직교되는 축을 중심으로 처음부터 요소들을 배치합니다.

center

기본 축과 직교되는 축을 중심으로 가운데에 요소들을 배치합니다.

flex-end

기본 축과 직교되는 축을 중심으로 맨 끝에 요소들을 배치합니다.

stretch

기본 축과 직교되는 축을 중심으로 요소들을 늘어뜨립니다.


justifyContent와 alignItems 는 매우 비슷하지만, 현재 flexDirection을 어떻게 설정했냐에 따라서 서로 입장이 바뀌게 됩니다.


설명을 쓰다보니, 말이 좀 어렵게 되었는데 생각보다 어려운 개념이 아닙니다.

추후에 헷갈리지 않게 꼭 한번씩 값들을 넣어가며 테스트해보시길 바랍니다.


블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


안녕하세요. 문범우입니다.

지난 포스팅에서 리액트 네이티브를 사용하기위해 기본적인 개발환경 구성을 진행하였습니다.

이번 포스팅에서는, 바로 개발을 진행하기전에 리액트 네이티브에 관한 기본적인 이론들을 간단히 살펴보도록 하겠습니다.


1. Component



위 코드는, 우리가 나중에 실제로 개발을 시작했을 때 처음에 세팅되는 코드입니다. 위의 코드를 통해 알 수 있는 점은 화면을 보여주는데 있어서 react나 기타 웹에서와 같이 div등과 같은 컴포넌트가 존재하지 않고, 특별하게 View, Text 와 같은 컴포넌트가 존재하는 것입니다.


다시말해, 우리는 react native에서 사용할 수 있는 컴포넌트들이 한정되어 있습니다.

컴포넌트들에 대해 더 자세한 내용은 아래의 react native 공식 홈페이지에서 확인할 수 있습니다.

https://facebook.github.io/react-native/


코드를 조금 더 자세히 확인해보면, 우리는 react native라는 것을 통해 Stylesheet, View, Text 라는 컴포넌트를 불러온 것을 알 수 있습니다.

이와 같이 리액트 네이티브에서 특정 컴포넌트를 사용하려면 이를 불러와서 사용해야 합니다.

이러한 리액트 네이티브의 컴포넌트는 각 모바일 환경에 맞춰서 자동적으로 변환됩니다.


즉, iOS같은 경우에는 object-c, 안드로이드같은 경우에는 java로 각각의 컴포넌트들이 네이티브하게 변환됩니다.

이러한 이유 때문에 우리는 이러한 컴포넌트들을 이용하는 것입니다.



2. style


그리고 14번 부터의 코드를 확인해보면 styles라는 객체를 만드는 것을 볼 수 있습니다. StyleSheet.create()에 대한 것은 추후에 배워볼 것인데, 무엇보다 주목되는 것은 flex가 적용되는 모습입니다.

우리가 이전에 iOS 모바일 앱을 개발하기 위해서 swift를 사용하거나, 안드로이드 모바일 앱을 만들기 위해서 안드로이드 스튜디오를 사용할 때 실제로 flex를 적용시키기 위해서는 매우 복잡해질 수 있습니다.


레이아웃을 잡기 위해 웹 등에서 매우 편하게 사용하는 flex를, 이제 리액트 네이티브를 통해 모바일 어플리케이션에서도 사용할 수 있게된 것입니다.


그리고 이렇게 우리가 설정한 스타일을 7번 줄에서 확인할 수 있듯이 매우 간단하게 적용시킬수 있습니다.


또한 아직은 직접 와닿지 않지만 추후에 직접 개발을 하다보면 리액트 네이티브가 매우 엄격하고, 까다롭다라는 점을 느낄 수 있습니다.

다시 말해서, 사소한 오타나 실수에 의해서도 오류가 발생하고 어플리케이션이 제대로 작동하지 않습니다.

우리가 웹프로그래밍을 할때는 사소한 오타 등은 단순히 적용되지 않을뿐이지 큰 오류를 발생시키지는 않았습니다.

하지만 리액트 네이티브에서는 매우 사소한 것들 또한 엄격하게 잡아내는데, 다르게 살펴봤을 때 오히려 이러한 것이 개발자들에게는 매우 편하게 작용될 수 있습니다.



이렇게 리액트 네이티브에 관해 매우 간단한 것들에 대해서 알아보았습니다.

실제로 레이아웃을 잡는 것은 모바일 어플리케이션에서 매우 중요한 일이기도 하기에 저희가 다음 포스팅부터는 실제로 개발을 시작하고, 먼저 Flexbox에 대해서 알아보도록 하겠습니다.

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc