иконок, хотя картинки по правильному пути и в другом месте показываются
import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Image } from 'react-native';
import { inject, observer } from 'mobx-react';
import CartBottomIcon from '@components/CartBottomIcon';
import AppStack from './AppStack';
import CatalogScreen from '../containers/CatalogScreen';
import CartScreen from '../views/cart';
@inject('cartStore')
@observer
export default class extends Component {
render() {
let routes = this.props.cartStore.active ?
{
Home: AppStack,
Cart: CartScreen,
Catalog: CatalogScreen
}
: {
Home: AppStack,
Catalog: CatalogScreen
};
let ComponentBar = createAppContainer(createBottomTabNavigator(routes,
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
navigation.state.routes[navigation.state.index];
let iconName;
if (routeName == 'Home') {
iconName = require('../assets/images/home1.png');
} else if (routeName == 'Catalog') {
iconName = require('../assets/images/catalog1.png');
}
if(routeName == 'Cart') {
return <CartBottomIcon/>;
}
return <Image source={iconName}
style={{tintColor, width: 25, height: 25}}
/>;
},
}),
tabBarOptions: {
showLabel: false,
activeTintColor: 'red',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 20,
},
style: {
borderTopWidth: 0.5,
borderTopColor: 'red',
padding: 0,
paddingRight : this.props.cartStore.active ? 50 : 0
},
},
}));
return <ComponentBar/>;
}
}
Попробуй обе картинки подключить сразу, и потом в условии уже подставь: const HomeIcon = require('../assets/images/home1.png'); const CatalogIcon = require('../assets/images/home1.png'); if (routeName == 'Home') { iconName = HomeIcon; } else if (routeName == 'Catalog') { iconName = CatalogIcon }
Обсуждают сегодня