god972
1월 15, 2019, 2:59오후
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;
오류는 나지 않고 그림만 보이지 않습니다.
맨밑 오른쪽 텝바 처럼 적용하고 싶습니다.
react-navigation 사용법과 상관없이 자바스크립트 코드만을 봤을 때도 이상하게 작성된 자바스크립트 코드가 보입니다. 코드 전체를 하나하나 어떻게 동작되는지 따져보면서 살펴보시기 바랍니다.
눈에 보이는 것만 언급해보자면 다음과 같습니다.
ba = this; ?? 어떤 의도로 this를 ba에 넣으셨는지 모르지만 잘못된 사용입니다.
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}
/>
)
);
god972
1월 21, 2019, 12:38오전
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 되는 이유는 무엇인가요?
콤마 연산자에서 반환(return)과 관련된 부분을 살펴보시면 이해될겁니다. 콤마 연산자는 맨 마지막 부분이 return 됩니다.
자바스크립트 개발자 포럼
