RN UI 연습 - 4 Tabs 만들기

벌써 Tabs을 만들 시간입니다.

일단 생각보다 tabs의 height가 큽니다. 60정도로 바꿔줍니다.

매우 간단합니다.

그림은 적당히 <View>로 회색처리 해서 보여주도록 하고 만들어 주세요.

밑에는 안보고 말이죠. 잘 모르더라도 일단 만들어 보세요.

지금까지 했던것 처럼. 맨처음 어떤 박스가 있나. 그 안에는 어떤 박스가 있나. 가로정렬일까? 세로 정렬일까?

안보고 해보세요. 생각을 하는것 자체가 실력이 느는거에요

다 만드셧나요? 아직인가요? 맨처음 View는 가로정렬이겠죠? 가로로 탭들이 있으니까요.

탭버튼5개. 그 탭버튼들은 이미지와 text로 이루어져 있네요. 이건 세로정렬이겠어요.

꼭 굳이 스타일을 전부다 예쁘게 할려고 하는게 아니라 구조 정도만 만드셔도 충분해요.

구조를 만들고 그 다음에 스타일을 넣는거에요. 원래 처음부터 다 할려고 하면 어려운 거에요.

차근차근 하나하나 만드세요.

이제 혼자서도 만들수 있겠죠?

class TabButton extends Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <View style={{height: 30, width: 30, backgroundColor: 'gray'}}></View>
        <Text style={{marginTop: 5, color: '#A0A0A0'}}>{this.props.name}</Text>
      </View>
    )
  }
}

export default class tabs extends Component {
  render() {
    return(
      <View style={styles.taps}>
        <TabButton name="홈"/>
        <TabButton name="시간표"/>
        <TabButton name="커뮤니티"/>
        <TabButton name="모임"/>
        <TabButton name="더보기"/>
      </View>
    )

  }
}

const styles = StyleSheet.create({
  taps: {
    height: 60,
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 0.5,
    borderColor: '#A0A0A0',
  },

});

전 이렇게 만들었어요. 꼭 TabButton을 따로 클래스를 만들필요도 없고, 스타일을 저렇게 넣을 필요는 없어요. 하지만 레이아웃을 이해는 꼭 하셔야 되요.

완성 화면입니다.

약간 다르긴 하지만 처음에 우리가 만들고자 했던 화면과 꽤 비슷하게 되었네요.

이제 지금까지 만들었던걸 다 지우세요.

그리고 혼자서 다시 만들어 보세요. 최대한 코드를 보지 않으면서요.

음 여긴 정말 모르겠어, 할 때에만 코드를 보세요.

이

스타일 속성은 잘모르겠어

하시면 검색을 하시면 됩니다. 아마 이걸 안보고 만들 수 있으시다면 이제 자신이 생각하는 화면을 만들어 보세요. 어렵지 않을 거에요.

어렵다면 다시

하나하나 차근차근

만드시면 분명 만드실 수 있을 거에요.