장면, 탭 (네이티브 라우터 플럭스 반응)과 아이콘 (반응 - 네이티브 벡터 아이콘)

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; 

모든 작동하지만 난 하나 더 원해 물건 : '반응 네이티브 벡터 아이콘'에서 아이콘을 추가하여 탭 버튼의 '문자열'을 바꿉니다.

누군가가 도와 줄 수 있습니까?

이미 반응 네이티브 벡터 아이콘이 설치되어 있으며 완벽하게 작동합니다.

감사

Answer 1

이것은 당신에게 몇 가지 아이디어를 제공해야합니다 -

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

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

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

을