如何在React Native Router Flux选项卡中显示图标？

Question

我正在使用expo构建一个本机（6.4.1版）应用程序。我正在使用react-native-router-flux作为导航器。由于某种原因，我无法显示标签图标。

这是我的代码：

// Libraries and References
import React, { Component } from 'react';
import { Router, Scene, ActionConst } from 'react-native-router-flux';
import I18n from './utils/i18n/i18n';
import { connect } from 'react-redux';
const Constants = require('./utils/constants/Constants');
import { Ionicons } from '@expo/vector-icons';
import { Icon } from 'react-native-elements';


// Components
import homeScreen from './components/screens/HomeScreen';
import alertsScreen from './components/screens/AlertAnnouncementScreen';
import resoucesScreen from './components/screens/ResourceScreen';
import settingsScreen from './components/screens/AccountSettingsScreen';


class TabIcon extends Component {
    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center', justifyContent: 'center', width:30, height:30 }}>
                <Icon style={{ color: 'red' }} name='md-checkmark-circle' />
            </View>
        );
    }
};


// Navigation 
class RouterComponent extends Component {

    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="tabHolder" tabs swipeEnabled activeBackgroundColor={Constants.BGC_GREEN} inactiveBackgroundColor={Constants.BGC_BLUE} inactiveTintColor={Constants.TAB_GREY} activeTintColor='white' type={ActionConst.RESET} >
                        <Scene key="homeTab" initial component={homeScreen} title={I18n.t('titles.home')} hideNavBar icon={TabIcon}>

                        </Scene>
                        <Scene key="alertsTab" component={alertsScreen} title={I18n.t('titles.alerts')} hideNavBar navBarButtonColor='white' icon={({ focused }) => (<Icon name='bell' type='font-awesome' size={30} color={focused ? 'white' : Constants.TAB_GREY} />)} />
                        <Scene key="resourcesTab" component={resoucesScreen} title={I18n.t('titles.resources')} hideNavBar icon={({ focused }) => (<Ionicons name='info' type='font-awesome' size={30} color={focused ? 'white' : Constants.TAB_GREY} />)} />
                        <Scene key="settingsTab" component={settingsScreen} title={I18n.t('titles.settings')} hideNavBar icon={({ focused }) => (<Icon name='gear' type='font-awesome' color={focused ? 'white' : Constants.TAB_GREY} />)} />

                    </Scene>
                </Scene>
            </Router>
        )
    }
}


//


// export
export default connect(null, null)(RouterComponent);

但是，我仍然没有选项卡。我已经尝试了所有可能的CSS方面（因此为什么它们如此充实），但无济于事。有什么线索吗？

更新

我知道这是一个标签问题，因为它可以在主屏幕上使用，但不能在标签上使用：

这是主屏幕：

    <View>
    <Text style={styles.welcomeText}>This is a signed in user</Text>
    <Icon name="check-circle" size ={30} />
    </View>

这是我刚刚更新的标签逻辑：

class TabIcon extends Component {
    render() {
        return (
            <Icon name="check-circle" size ={30} />
        );
    }
};

以下是屏幕截图：

Answer 1

为此，我联系了GitHub，终于得到了答案。 Here是链接。

问题是navigationOptions。它将超越 all 导航样式选项。我从单个屏幕组件中删除了它，从而解决了该问题！

Answer 2

我认为您的所有名称道具对于两个Icon组件都是错误的。我能够得到：<Icon name="check-circle" />显示和<Ionicons name="md-checkmark-circle" />显示，但<Icon name="md-checkmark-circle" />或<Ionicons name="bell" />没有显示。

以下是离子图标可接受图标的可搜索列表：https://infinitered.github.io/ionicons-version-3-search/

如果要使用FontAwesome图标，则需要： import { FontAwesome } from @expo/vector-icons';，然后使用名称为prop的FontAwesome组件： <FontAwesome name="bell" />

此外，对于react native元素图标，以下是可用集合的列表：https://react-native-training.github.io/react-native-elements/docs/icon.html#available-icon-sets

如果您看一下超棒的字体集，您会看到'gear'不是一个选项，但是'cog'是： https://fontawesome.com/icons?d=gallery&q=gear