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

React_native

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

Tigercow.Door 2018. 5. 25. 16:01

지난글

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

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

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

Github

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

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

지난 포스팅에서는 인스타그램 메인 화면 상단에 있는 스토리바를 추가해보았습니다.

이번 포스팅에서는 프로필창의 상단부분을 완성시켜보도록 합니다.

이번 포스팅을 통해 나오는 결과물은 다음과 같습니다.

(강의에서 진행되는 내용과 약간의 차이가 존재합니다.)

1. 상단 네비게이션바 수정

먼저 현재의 프로필 탭을 눌러보면 다음과 같은 화면이 나옵니다.

첫번째로 수정해야 하는 항목은 상단 네비게이션입니다.

우리가 HomeTab에서의 기준으로 상단바를 만들었는데, 사실상 프로필탭에서는 상단바가 다릅니다.

따라서, MainScreen.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
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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Platform
    } from 'react-native';
 
import { Icon } from 'native-base';
import { createTabNavigator } from 'react-navigation';
 
import HomeTab from './AppTabNavigator/HomeTab';
import SearchTab from './AppTabNavigator/SearchTab';
import AddMediaTab from './AppTabNavigator/AddMediaTab';
import LikesTab from './AppTabNavigator/LikesTab';
import ProfileTab from './AppTabNavigator/ProfileTab';
 
class MainScreen extends Component{
 
    static navigationOptions = {
        header: null
    }
 
    render() {
        return (
            <AppTabNavigator />
        );
    }
}
export default MainScreen;
 
const AppTabNavigator = createTabNavigator({
    HomeTab:{
        screen: HomeTab
    },
    Search:{
        screen: SearchTab
    },
    AddMedia:{
        screen: AddMediaTab
    },
    Likes:{
        screen: LikesTab
    },
    Profile:{
        screen: ProfileTab
    }
}, {
    animationEnabled: true,
    swipeEnabled: true,
    tabBarPosition: "bottom",
    tabBarOptions: {
        style: {
            ...Platform.select({
                android:{
                    backgroundColor:'white'
                }
            })
        },
        activeTintColor: '#000',
        inactiveTintColor: '#d1cece',
        showLabel: false,
        showIcon: true,
    }
})
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
Colored by Color Scripter
cs

21번줄을 보시면 이전에 있던 헤더를 모두 없애고 단순히 null 값을 주었습니다.

이제 HomeTab.js에서 헤더를 추가해야합니다.

헤더를 만들기 위해 필요한, Header, Left, Right, Body를 native base에서 import하고 아래와 같이 코드를 작성합니다.

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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView
    } from 'react-native';
import { Icon, Container, Content, Thumbnail, Header, Left, Right, Body } 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}>
                <Header>
                    <Left><Icon name='ios-camera-outline' style={{paddingLeft:10}}/></Left>
                    <Body><Text style={{fontWeight:'900'}}>Instagram</Text></Body>
                    <Right><Icon name='ios-send-outline' style={{paddingRight:10}}/></Right>
                </Header>
                <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'
    }
})
Colored by Color Scripter
cs

23번줄 ~ 27번줄을 보시면 헤더가 추가된 코드를 확인하실 수 있습니다.

이렇게 하면 HomeTab에서만 상단 바가 나타나고 다른 화면에서는 나타나지 않는 것을 확인할 수 있습니다.

2. 프로필창 상단 구성하기

그럼 이제 프로필창으로 넘어와서 상단 네비게이션 바와, 프로필 사진, 팔로워 수 등을 구성해보도록 하겠습니다.

먼저 전체적인 구성에 필요할 요소들을 import 합니다.

native base로 부터, Container, Content, Header, Left, Body, Right, Button을 import 합니다.

이제 프로필창 상단에 있는 네비게이션 바를 구성합니다.

(해당 부분은 강의 영상과 약간의 차이가 있습니다.)

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, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } 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>
                <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>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
Colored by Color Scripter
cs

18번줄 ~ 28번줄까지 프로필창의 헤더를 구성하였습니다. HomeTab에서의 구성과 거의 비슷하지만 Body가 없고 Left와 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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>
                <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>
                        <View style={{flexDirection:'row'}}>
                            <View style={{flex:1}}>
                                <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>
                        </View>
                    </View>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
Colored by Color Scripter
cs

많은 View태그로 묶여있어서 헷갈릴 수도 있지만 하나씩 살펴보도록 하겠습니다.

31번줄에서 첫번째 View태그로 시작되어 프로필창을 전체적으로 묶어주고 있습니다.

이후 다음 32번줄의 View태그에서는 상단 태그를 묶어주는 것으로써 상단의 요소들이 가로로 정렬되기 때문에 flexDirection도 함께 설정하였습니다.

그리고 33번의 View태그에서는 사진을 담고 있으며, 37번의 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
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>
                </Content>
            </Container>
        );
    }
}
export default ProfileTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
Colored by Color Scripter
cs

53번 ~ 56번줄에서 버튼을 추가했습니다.

그리고 지금까지 구성한 요소들을 묶는 View태그에서 벗어나 60번 줄에서 새로운 View태그를 만들어 그 안에 사용자의 이름과 내용을 넣어주었습니다.

이렇게 하여 나온 결과는 다음과 같습니다.

728x90

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

'React_native' 카테고리의 다른 글

리액트 네이티브 #8_ 인스타그램(Instagram) UI 무작정 따라하기 (5) (4)	2018.05.31
리액트 네이티브 #6_ 인스타그램(Instagram) UI 무작정 따라하기 (3) (0)	2018.05.24
리액트 네이티브 #5_ 인스타그램(Instagram) UI 무작정 따라하기 (2) (0)	2018.05.22
리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1) (4)	2018.05.21
리액트 네이티브 #3_ 프로젝트 시작하기 & FlexBox (0)	2018.04.20

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

Tigercow.Door