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

React React Native
, ,
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

맨밑 오른쪽 텝바 처럼 적용하고 싶습니다.

53
53778×1606 339 KB

2

react-navigation 사용법과 상관없이 자바스크립트 코드만을 봤을 때도 이상하게 작성된 자바스크립트 코드가 보입니다. 코드 전체를 하나하나 어떻게 동작되는지 따져보면서 살펴보시기 바랍니다.

눈에 보이는 것만 언급해보자면 다음과 같습니다.

  1. ba = this; ?? 어떤 의도로 this를 ba에 넣으셨는지 모르지만 잘못된 사용입니다.
  2. PetSitters 일때는 Image 로하고 아닐 때는 Ionicons 를 리턴하고자 한 것 같은데 여기서 return 값은 항상 <Ionicons .../> 입니다. 삼항조건 연산자를 사용해보세요.
        return (
          (
            <TouchableHighlight>
              <Image
                style={{ width: 30, height: 30 }}
                source={{
                  uri: ba
                }}
              />
            </TouchableHighlight>
          ),
          (
            <Ionicons
              name={iconName}
              size={horizontal ? 20 : 25}
              color={tintColor}
            />
          )
        );
3

삼항 연산자 조언 감사합니다 .

 tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "MyCars") {
          iconName = "ios-car";
        } else if (routeName === "Auctions") {
          iconName = "ios-trending-up";
        } else if (routeName === "Registers") {
          iconName = "ios-settings";
        } else if (routeName === "PetSitters") {
          iconName =
            "https://www.olchiolchi.com/wp-content/uploads/2017/06/14.jpg";
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return routeName === "PetSitters" ? (
          <TouchableHighlight>
            <Image
              style={{ width: 30, height: 30 }}
              source={{
                uri: iconName
              }}
            />
          </TouchableHighlight>
        ) : (
          <Ionicons
            name={iconName}
            size={horizontal ? 20 : 25}
            color={tintColor}
          />
        );
      }

덕분에 해결 되었습니다 감사합니다.

  • 다만 질문이 있는점은 <Image …/>안에 ba가 아닌 iconName 으로 놓았을 때에도 yomybaby님 말씀대로 return은 항상 <Ionicons …/> 로 받던데요 순차적 실행인데도 불구하고 <Image …/>가 앞에있는데 <Ionicons …/> 로만 return 되는 이유는 무엇인가요?
4

콤마 연산자에서 반환(return)과 관련된 부분을 살펴보시면 이해될겁니다. 콤마 연산자는 맨 마지막 부분이 return 됩니다.