텍스트로만 이루어진 하단 탭이 나타났나요? 현재 아이콘을 따로 설정하지 않았기 때문에 ? 또는 X가 나타납니다. 이는 추후 아이콘을 설정하여 고쳐주겠습니다. 하단 탭 내비게이터는 앞에서 다룬 네이티브 스택 내비게이터, 드로어 내비게이터와 마찬가지로 상단에 헤더가 나타납니다. 헤더는 Tab.Navigator에 screenOptions를 설정하거나 각 Tab.Screen에 options를 설정하여 커스터마이징할 수 있습니다.

이제 아이콘을 사용하기 위해 iOS와 안드로이드에 필요한 설정을 해주겠습니다.

Info.plist를 열어 최하단에 UIAppFonts를 추가해주세요.

ios/LearnReactNavigation/Info.plist - 최하단

(...)
  <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>UIAppFonts</key>
    <array>
        <string>MaterialIcons.ttf</string>
    </array>
</dict>
</plist>

그다음에는 build.gradle 파일을 열어 최하단에 다음 코드를 추가해주세요.

android/app/build.gradle - 최하단

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

설정을 마치고 yarn ios와 yarn android 명령어를 실행해 앱을 다시 가동해주세요.