場景，標籤（反應本地路由器通量）和圖標（反應母語 - 矢量圖標）

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