[RN] 하단 버튼바 만들기

 

UI 에 필수적인 하단 버튼바 만들기

 

import React, { useState } from "react";
import { View, Text, TouchableOpacity, Image } from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";
import styles from '../components/Bstyles';
import { COLORS } from '../components/theme';
 

const TabItem = ({ tabId, currentTabId, setTabId, iconName, imageName, label }) => {
  const isSelected = currentTabId === tabId;
  
  const handlePress = () => {
    setTabId(tabId);
    // tabId를 setTabId 함수에 전달하여 현재 선택된 탭을 변경
  };

  return (
    <TouchableOpacity onPress={handlePress}>
      <View
        style={[
          styles.tabIcon,
          {
            backgroundColor: isSelected ? COLORS.accent : COLORS.primary,
          },
        ]}
      >  // 아이콘을 기본값으로 하는데 iconName이 없을 경우 imagename 찾으면 된다. 
        {iconName ? (
          <Icon name={iconName} size={25} color={COLORS.black} />
        ) : (
          <Image source={imageName} style={{ width: 25, height: 25 }} />
        )}
        <Text style={styles.tabText}>{label}</Text>
      </View>
    </TouchableOpacity>
  );
};

const BottomTabBar = () => {

  const [tabId, setTabId] = useState(0); // tabId 가 숫자로 받을거고 기본값은 home 이어야하니까 0

  return (
    <View style={styles.tabRow}>
      <TabItem
        tabId={0}
        currentTabId={tabId}
        setTabId={setTabId}
        iconName="home-outline"
        label="Home"
      />
      <TabItem
        tabId={1}
        currentTabId={tabId}
        setTabId={setTabId}
        iconName="newspaper-outline"
        label="뉴스소식"
      />
      <TabItem
        tabId={2}
        currentTabId={tabId}
        setTabId={setTabId}
        imageName={Icon이름}
        label="레이블이름"
      />
      <TabItem
        tabId={3}
        currentTabId={tabId}
        setTabId={setTabId}
        iconName="person-outline"
        label="마이페이지"
      />
    </View>
  );
};

export default BottomTabBar;

 

컴포넌트화

import React, { useState } from "react";

import { View, Text, TouchableOpacity } from 'react-native';

import Icon from "react-native-vector-icons/Ionicons";

import styles from '../components/styles';

const TabItem = ({ tabId, currentTabId, setTabId, iconName, label }) => {

return (

<TouchableOpacity onPress={() => { setTabId(tabId) }}>

<View style={[styles.tabIcon, {

backgroundColor: currentTabId === tabId ? styles.white : styles.accent

}]}>

<Icon name={iconName} size={25} color={styles.black} />

<Text style={styles.tabText}>{label}</Text>

</View>

</TouchableOpacity>

);

};

const BottomTabBar = () => {

const [tabId, setTabId] = useState(0);

return (

<View style={styles.tabRow}>

<TabItem tabId={0} currentTabId={tabId} setTabId={setTabId} iconName="home-outline"  />

<TabItem tabId={1} currentTabId={tabId} setTabId={setTabId} iconName="camera-outline" />

<TabItem tabId={2} currentTabId={tabId} setTabId={setTabId} iconName="help-circle-outline"  />

<TabItem tabId={3} currentTabId={tabId} setTabId={setTabId} iconName="chatbubble-ellipses-outline"  />

<TabItem tabId={4} currentTabId={tabId} setTabId={setTabId} iconName="person-outline"  />

</View>

);

};

export default BottomTabBar;

 

> 결과

 

만약에! 글씨를 추가하고 싶다면

return (

<View style={styles.tabRow}>

<TabItem tabId={0} currentTabId={tabId} setTabId={setTabId} iconName="home-outline" label="Home" />

<TabItem tabId={1} currentTabId={tabId} setTabId={setTabId} iconName="camera-outline" label="camera" />

<TabItem tabId={2} currentTabId={tabId} setTabId={setTabId} iconName="help-circle-outline" label="info" />

<TabItem tabId={3} currentTabId={tabId} setTabId={setTabId} iconName="chatbubble-ellipses-outline" label="chat" />

<TabItem tabId={4} currentTabId={tabId} setTabId={setTabId} iconName="person-outline" label="마이페이지" />

</View>

 

뒤에 label 을 추가해주면 된다.