react-native-vector-icons

공식 Github을 참고해 주세요.

npm i --save react-native-vector-icons rnpm link 이번엔 rnpm을 사용합니다.

이걸 이용해서 우리가 React Native UI에서 했던 예제를 좀더 발전시켜 보죠.

이 예제에서 저 회색창들을 한번 예쁘게 icon을 넣어보죠.

일단 components/buttonGroup 에

import Ionicons from 'react-native-vector-icons/Ionicons'

을 추가합시다.

우리는 Ionicons 의 아이콘을 사용할 예정이니

Ionicons 홈페이지 에서 아이콘을 적당히 고릅시다.

그 다음

export default class buttonGroup extends Component {
  render() {
    return(
      <View style={styles.buttonGroup}>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <Button name="내 계정" iconName="ios-person-outline"/>
          <Button name="친구" iconName="ios-people-outline" />
          <Button name="강의평가" iconName="ios-book-outline" />
          <Button name="학점계산기" iconName="ios-calculator" />
        </View>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <Button name="쪽지함" iconName="ios-mail-outline" />
          <Button name="공지사항" iconName="ios-notifications-outline" />
          <Button name="도움말" iconName="ios-help-circle-outline" />
          <Button name="설정" iconName="ios-settings-outline" />
        </View>
      </View>
    )
  }
}

이렇게 적당히 선택해서 바꿔줍니다.

그 다음 Button을

<View style={{flex: 1, height: 100, borderWidth: 0.3, justifyContent: 'center', alignItems: 'center'}}>
        <Ionicons size={35} name={this.props.iconName} color="#000000" />
        <Text style={{marginTop: 5}}>{this.props.name}</Text>
</View>

이렇게 바꾸면 예쁘게 잘 나옵니다.

같은 방법으로 Tab도

<View style={styles.taps}>
        <TabButton name="홈" iconName="ios-home-outline"/>
        <TabButton name="시간표" iconName="ios-apps"/>
        <TabButton name="커뮤니티" iconName="ios-cloud-outline"/>
        <TabButton name="모임" iconName="ios-chatbubbles-outline"/>
        <TabButton name="더보기" iconName="ios-more"/>
</View>

이렇게 매우 그럴 듯 하게 잘 바뀝니다.