[RN] React Navigation BottomTab 아이콘 변경

리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다.

리액트 네이티브 버전 :  "react-native": "0.69.2"

 

- 지난번에 하단 탭을 만들었는데 거기에 아이콘을 넣으려고 react-native-vector-icons 라이브러리를 설치했다.

- 하지만 자꾸 typescript에서 에러가 발생했다.

- 원인은 타입스크립트용 라이브러리를 추가로 설치해야되는 것이었다.

 

npm install --save react-native-vector-icons
npm install @types/react-native-vector-icons

- 원하는 아이콘을 선택해서 넣었는데, 계속 에러가 떴다.

- 이전과 다르게 "react-native-vector-icons": "^9.2.0" 버전에서는 pod install이 안되서 직접 추가를 해주어야 했다.

 

- 먼저 Podfile을 열고 config = use_native_modules! 아래에 

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

 

 

위 코드를 넣어준다.

 

- info.plist파일을 열어서 마지막 </dict> 바로 윗줄에 아래 코드를 작성후 npm run ios로 실행하면 잘된다!

 

	<key>UIAppFonts</key>
	<array>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>Zocial.ttf</string>
	</array>

 

- 추가로 react navigation 6버전에서 아이콘 넣는 방법이 바뀐거 같다. 예전엔 그냥 

<Tab.Screen
    name="MyPage"
    component={screen}
    options={{
      headerShown: false,
      tabBarLabel: "Second",
      tabBarButton: () => (
        <View>
          <TouchableOpacity>
            <MaterialIcons name="person" color={props.color} size={26} />
          </TouchableOpacity>
        </View>
      ),
    }}
/>

- 이런 식으로 넣으면 됐었는데, 지금 하니 버튼도 먹통이되고 모양도 이상하다.

- 공식 홈페이지 확인하니 뭔가 달랐다.

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

- NavigationContainer를 추가하고 태그 안에 <NavigationContainer independent={true}>를 넣어주니 잘된다.

- 공식홈페이지에는 independent를 안넣었는데, 나는 에러가 나서 에러를  읽어보니 넣으라고 해서 넣었다.

- 상위 컨테이너와 독립적으로 할 것인지를 true, false 값으로 넣어줘야 한다.

- 외부 화면으로 이동할 필요가 없을 때 넣어주면 된다.