typescript - createBottomTabNavigator 上的 React-Native 图标不出现

Question

我对 React-Native 相当陌生，我正在尝试实现底部导航栏。

我已经成功地做到了这一点，但是，我似乎无法让图标正常工作。

我正在使用的代码

import React from 'react';

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {NewsPage} from "./src/components/NewsPage";
import {TaskOverview} from "./src/components/TaskOverview";
import {Agenda} from "./src/components/Agenda";
import {Wiki} from "./src/components/Wiki";
import {Profile} from "./src/components/Profile";
import {Icon} from 'react-native-elements'

const TabNavigator = createBottomTabNavigator({
    TaskOverview: {
        screen: TaskOverview,
        navigationOptions: {
            tabBarLabel: 'Example title',
            tabBarIcon: ({tintColor}) => (
                <Icon name="rocket" color={tintColor} size={24}/>
            )
        },
    },
    NewsPage: {
        screen: NewsPage,
        navigationOptions: {
            tabBarLabel: 'Example title2',
            tabBarIcon: ({tintColor}) => (
                <Icon name="rocket" color={tintColor} size={24}/>
            )
        },
    },
});

const AppContainer = createAppContainer(TabNavigator);

export default class App extends React.Component {
    render() {
        return <AppContainer/>;
    }
}

我得到的结果

它向我显示底部导航，但对于图标，它实际上向我显示了一个问号。

我试过什么

• 我尝试使用 IonIcon 而不是 Icon，但这并没有为我解决这个问题。
• 我尝试了不同的图标名称。

我希望有人能给我一些见解。

标签： typescriptreact-native

Answer 1

我最终没有使用该元素。

我通过使用带有以下代码的本地图像解决了我的图标问题：

            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('./src/assets/megaphone.png')}
                    style={{width: 26, height: 26, tintColor: tintColor}}
                />
            )