イオニコンのバッジをレンダリングする方法は？ （TabBarアイコン）

Question

TabBarアイコンに<Ionicons>を使用しています。

ユーザーがまだ読んでいない通知の数を取得しています。

{... "unread": 1} - >この場合、アイコンに1を表示します。私はコードの私の抜粋である私たちはここで

、例えばbadging

それを呼び出すと思います。万博を使ったことがあれば、博覧会で提供されたデフォルトプロジェクトはあまり変わっていません。

import { Ionicons } from '@expo/vector-icons'; 

... 

tabBarIcon: ({ focused }) => { 
    <Ionicons 
     name={iconName} 
     size={30} 
     style={{ marginBottom: -3 }} 
     color={focused ? Colors.tabIconSelected : Colors.tabIconDefault} 
    /> 

私は<View />でIoniconsをラップし、いくつかのスタイリングを行うことができるかどうかはわかりません。

Answer 1

あなたがReactまたはReact-Nativeを使用している場合は、あなたや他のコンポーネントであなたをラップすることができます。あなたが望むバッジを取得するには、あなたまたは類似のコンポーネントであなたをラップしたいと思うでしょう。 react-native-icon-badgeと呼ばれるnpmにはこのようなものが1つあります。https://www.npmjs.com/package/react-native-icon-badge

<IconBadge 
      MainElement={ 
       <Ionicons 
        name={iconName} 
        size={30} 
        style={{ marginBottom: -3 }} 
        color={focused ? Colors.tabIconSelected : 
          Colors.tabIconDefault} 
        /> 
      } 
      badgeNumber={count} 
     />