Szene, Tabs (reagieren-native-Router-Fluss) und Symbole (reagieren-native-Vektor-Icons)

Question

ich wie unter meine Router-Datei:

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; 

Alles funktioniert wie erwartet, aber ich möchte noch eine thing: Hinzufügen von Symbolen aus 'react-native-vector-icons', um 'string' für Tabs-Schaltflächen zu ersetzen.

Kann jemand bitte helfen?

Ich habe react-native-Vektor-Icons bereits installiert und es funktioniert perfekt.

Dank

Answer 1

Diese sollten Sie eine Vorstellung geben -

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

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

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