场景，标签（react-native-router-flux）和图标（react-native-vector-icons）

Question

我的路由器文件如下：

import *;


const TabIcon = ({ selected, title }) => (
  <Text style={{ color: selected ? 'red' : 'black' }}>{ title }</Text>
);

const RouterComponent = () => (
  <Router>
    <Scene key="root">
      <Scene
        key="tabbar"
        tabs
        tabBarStyle={{ backgroundColor: '#FFFFFF' }}
      >
        <Scene key="One" title="ONE" icon={TabIcon}>
            <Scene
              key="screenone"
              component={ScreenOne}
              hideNavBar
              initial
            />
          </Scene>
          <Scene key="Two" title="Two" icon={TabIcon}>
            <Scene
              key="screentwo"
              component={ScreenTwo}
              hideNavBar
            />
          </Scene>
          <Scene key="Three" title="Three" icon={TabIcon}>
            <Scene
              key="screenthree"
              component={ScreenThree}
              hideNavBar
            />
          </Scene>
          <Scene key="Four" title="Four" icon={TabIcon}>
            <Scene
              key="screenfour"
              component={ScreenFour}
              hideNavBar
            />
          </Scene>
          <Scene key="Five" title="Five" icon={TabIcon}>
            <Scene
              key="screenfive"
              component={ScreenFive}
              hideNavBar
            />
          </Scene>
        </Scene>
      </Scene>
      <Scene
        key="modal"
        component={ModalScreen}
        title="Modal"
        direction="vertical"
        hideNavBar
      />
  </Router>
);

export default RouterComponent;

一切都按预期工作但我还想要一件事：从'react-native-vector-icons'添加图标来替换标签按钮的'string'。

有人可以协助吗？

我已经安装了react-native-vector-icons并且它的工作非常完美。

谢谢

Answer 1

这应该给你一些想法 -

import Icon from 'react-native-vector-icons/FontAwesome';

const myIcon = (<Icon name="rocket" size={30} color="#900" />)

const TabIcon = ({ selected, title }) => (
    myIcon
);