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

Question

我正在使用 expo 构建一个 React Native（版本 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

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

这是 Ionicons 可接受图标的可搜索列表：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

如果您查看 font-awesome 集，您会发现 'gear' 不是一个选项，但 'cog' 是： https://fontawesome.com/icons?d=gallery&q=gear

Answer 2

为此我联系了GitHub，终于得到了答复。 Here 就是 link。

问题是 navigationOptions。它将覆盖所有导航样式选项。我从我的个人屏幕组件中删除了它，并解决了这个问题！

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

How to get icons showing in React Native Router Flux tab?

react-native

expo

react-native-router-flux