使用React Native的选项卡导航器上未显示图标

时间:2019-04-05 15:39:16

标签: react-native react-navigation

我在使用createBottomTabNavigator显示图标时遇到问题。我使用的是react-native-ionicons,如果在代码中放入任何种类的Icon,它都可以正常工作,但没有显示在选项卡栏上。 我已经设置了showIcon: true

这是我正在尝试的代码:

import React from 'react';
import {View, Text} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

import HomeScreen from './screens/HomepageScreen';

  class SettingsScreen extends React.Component {

    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>
        </View>
      );
    }
  }

const BottomNavigation = createBottomTabNavigator(
    {
      Home: HomeScreen,
      Settings: SettingsScreen,
    },
    {
      tabBarOptions: {
        inactiveTintColor: 'gray',
        swipeEnabled: true,
        showLabel: true,
        showIcon: true
      },
    }
  );

export default createAppContainer(BottomNavigation);

HomepageScreen.js:

import React from 'react';
import {View, Text, Image, ScrollView} from 'react-native';
import {Card, CardItem, Right, Left} from 'native-base';
import {Header} from 'react-native-elements';
import Icon from 'react-native-ionicons'

class HomeScreen extends React.Component {

    state = {
        news: []
    }

    static navigationOptions = {
        title: 'Noticias',
        tabBarIcon: ({tintColor}) => {
            <Icon style={{width: 10, height: 10, color: 'black'}} ios="ios-add" android="md-add" />
        }
    }

    render() {
      return (
        //code
      );
    }
}

export default HomeScreen;

我想念什么吗?

1 个答案:

答案 0 :(得分:0)

大小可能太小,如果要使用color={tintColor},则需要放置tintColor

import React from 'react';
import {View, Text, Image, ScrollView} from 'react-native';
import {Card, CardItem, Right, Left} from 'native-base';
import {Header} from 'react-native-elements';
import Icon from 'react-native-ionicons'

class HomeScreen extends React.Component {
   static navigationOptions = {
        title: 'Noticias',
        tabBarIcon: ({tintColor}) => {
            <Icon color={tintColor} ios="ios-add" android="md-add" />
        }
    }


    render() {
      return (
        //code
      );
    }
}

export default HomeScreen;

希望有帮助!