react-native - 场景、选项卡 (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”添加图标以替换选项卡按钮的“字符串”。

有人可以帮忙吗？

我已经安装了 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
);