native-router-flux图标不会显示在TabBar上

Question

我一直在为我的本机应用程序使用react-native-router-flux包，用这个替换了react-navigation。

但是似乎无法显示图标。 （通过react-navigation，它确实起作用并且图标在那里）

附上我的代码：

    import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Icon from '@expo/vector-icons/FontAwesome';

import HomeScreen from '../screens/HomeScreen';
import DealsScreen from '../screens/DealsScreen';

const AppNavigation = () => {
  return (
    <Router>
      <Scene key="root">
        {/* Tab Container */}
        <Scene
          key="tabbar"
          tabs={true}
          tabBarStyle={{ backgroundColor: '#000000' }}
          showLabel={false}
          tabBarPosition="bottom"
          hideNavBar={true}
          activeTintColor="#FFC920"
        >
          {/* Tab and it's scenes: */}
          <Scene key="home"
            component={HomeScreen}
            title="Home"
            initial={true}
            activeTintColor="#FFC920"
            icon={<Icon name="home" style={{ width: 30, height: 30 }} size={30} color="#FFFFFF"/>}
          />
          <Scene key="deals"
            component={DealsScreen}
            title="Deals"
            activeTintColor="#FFC920"
            icon={<Icon name="tachometer" style={{ width: 30, height: 30 }} size={30} color="#FFFFFF"/>}
          />
        </Scene>
        {/* End of: Tab Container */}
      </Scene>
    </Router>
  );
}

export default AppNavigation;

Answer 1

您应该在react-native-router-flux中使用这样的图标方法

 <Scene key="home"
        component={HomeScreen}
        title="Home"
        initial={true}
        activeTintColor="#FFC920"
        icon={homeIcon}
      />

和homeIcon的常量

 class homeIcon extends React.Component {
    render() {
        return (
            <Icon name="tachometer" style={{ width: 30, height: 30 }} size={30} color="#FFFFFF"/>
        )
    }
}