创建底部选项卡导航器上的反应原生图标不会出现

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，但这并没有为我解决这个问题。
• 我尝试了不同的图标名称。

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

Answer 1

我最终没有使用该元素。

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

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

Answer 2

这是因为"Rocket"不是Material图标包的一部分。

材料图标的完整列表在这里： https://material.io/resources/icons/?style=baseline

你必须使用type道具并使用类似font-awesome的东西来获得火箭：

<Icon name="rocket" color={"red"} size={24} type="font-awesome"/>

更多信息： https://react-native-elements.github.io/react-native-elements/docs/1.0.0/icon.html#type