Bottom Navigation TabBar에 대해 질문이 있습니다.

리액트 네이티브 Zero to App
#1

TabBar에 아이콘이 아닌 이미지를 넣고 싶습니다.

  • 그래서 TestMyCar Tab에 넣어보고 싶어서 실험을 해보았는데 적용이 되지 않았습니다 어떻게 해야 적용을 할수 있나요?

넣고 싶은 해당 App.js 코드 입니다

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { MyCarScreen, AddCarScreen } from "./screen/MyCarScreen";
import { AuctionScreen, AddAuctionScreen } from "./screen/AuctionScreen";
import LoginScreen from "./screen/LoginScreen";
import { RegisterScreen } from "./screen/LoginScreen";
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator
} from "react-navigation";
import { TestMycar } from "./screen/TestMycar";
import { Image, TouchableHighlight } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

const defaultNavigationOptions = {
  headerTintColor: "white",
  headerStyle: {
    backgroundColor: "#74b9ff",
    fontSize: 30
  }
};

const MyCarStack = createStackNavigator(
  {
    MyCars: MyCarScreen,
    Add: AddCarScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const AuctionStack = createStackNavigator(
  {
    Auctions: AuctionScreen,
    AddAuction: AddAuctionScreen
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const TestStack = createStackNavigator(
  {
    TestMyCar: TestMycar
  },
  {
    defaultNavigationOptions,
    headerLayoutPreset: "center"
  }
);

const MainTab = createBottomTabNavigator(
  {
    MyCars: MyCarStack,
    Auctions: AuctionStack,
    Registers: RegisterScreen,
    PetSitters: TestStack
  },

  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor, image }) => {
        const { routeName } = navigation.state;
        let iconName;
        let ba =
          "https://postfiles.pstatic.net/MjAxOTAxMTVfMjk3/MDAxNTQ3NTEzMDI1MDEx.ODD9YUUNc5YSk4Zz1wTgxmpf_BRr154ekJ-vJQ1f3ocg.u1uIXInfJ3O2PTKFmKFaI46epH_e8IzD5TEB96K-eF4g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.43.png?type=w966";
        if (routeName === "MyCars") {
          iconName = "ios-car";
        } else if (routeName === "Registers") {
          iconName = "ios-person";
        } else if (routeName === "Auctions") {
          iconName = "ios-trending-up";
        } else if (routeName === "PetSitters") {
          ba = this;
        }

        return (
          (
            <TouchableHighlight>
              <Image
                style={{ width: 30, height: 30 }}
                source={{
                  uri: ba
                }}
              />
            </TouchableHighlight>
          ),
          (
            <Ionicons
              name={iconName}
              size={horizontal ? 20 : 25}
              color={tintColor}
            />
          )
        );
      },
      tabBarOptions: {
        activeTintColor: "#74b9ff",
        inactiveTintColor: "gray"
      }
    })
  }
);

const RootStack = createStackNavigator(
  {
    Home: LoginScreen,
    main: MainTab
  },

  {
    mode: "modal",
    headerMode: "none"
  }
);

const AppContainer = createAppContainer(RootStack);

export default AppContainer;

오류는 나지 않고 그림만 보이지 않습니다.

07
07746×1630 136 KB

#2

jsdev에 올리신 글과 동일한 글이네요. jsdev.kr의 해당 글에 댓글 남겼습니다. 중복으로 올리신거라 class.codejong.kr 에 올리신 글은 며칠 후 삭제하겠습니다. 같은 질문을 중복으로 올리지 않으셔도 됩니다.