カスタムタブの各タブにアイコンを追加するにはどうすればよいですか？

Question

私は反応ナビゲーションを使用しています。

タブのアイコンを追加します。

CustomTabs.js from example directory

Answer 1

あなたが反応するネイティブ・ベクトル・アイコンを使用している場合ははるかに簡単です、あなたが使用したいアイコンのすべての名前のために、あなたならば、私は以下の作成したような配列を作成します最後に反応したネイティブで静的資産を動的に読み込むことはできないため、イメージリンクを使用する必要があります。アイコン集のトンへ

• アクセス：特に反応するネイティブ・ベクトルのアイコンをアイコンを使用しての

  給付。

• フォーカスしているかどうかに基づいてスタイルを設定します。
• ....その他私が覚えていないもの。

`

 ..... 
     import Icon from 'react-native-vector-icons/Ionicons'; 


     const styles = { 
       body: { 
       backgroundColor: '#3b4147', 
       height: 60, 
       }, 
       tabWrapper: { 
       flexDirection: 'row', 
       justifyContent: 'center', 
       alignItems: 'center', 
       height: 50, 
       }, 
       tabInnerWrapper: { 
       marginRight: 12, 
       marginLeft: 12, 
       justifyContent: 'center', 
       alignItems: 'center', 
       }, 
       textStyle: { 
       fontSize: 12, 
       color: '#62666b', 
       }, 
       focusTextStyle: { 
       fontSize: 12, 
       color: '#acafb1', 
       }, 
      }; 

     const {body, tabWrapper, tabInnerWrapper, textStyle, focusTextStyle} = styles; 
     const focusIconColor = '#acafb1'; 
     const iconColor = '#62666b'; 

     const IconNames = ['ios-compass-outline', 'ios-cut-outline', 'ios-chatboxes-outline']; 
     const IconNamesFocus = ['ios-compass', 'ios-cut', 'ios-chatboxes']; 

     const CustomTabBar = ({ navigation: { state, navigate }}) => { 
     const { routes } = state; 
      return (
      <View style={body}> 
      <View style={tabWrapper}> 
      {routes && routes.map((route, index) => { 
       const focused = index === state.index; 
       return (

       <TouchableOpacity 
       key={route.key} 
       onPress={() => navigate(route.routeName)} 
       style={tabInnerWrapper} 
       > 
       <Icon 
        name={focused ? IconNamesFocus[index] : IconNames[index]} 
        size={25} 
        color={focused ? focusIconColor : iconColor} 
       /> 

       <Text style={focused ? focusTextStyle : textStyle}> 
        {route.routeName} 
       </Text> 
       </TouchableOpacity> 
      ); 
      })} 

     </View> 
     </View> 

    ); 

}; 

`