场景，标签（反应本地路由器通量）和图标（反应母语 - 矢量图标）

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 
);