web-dev-qa-db-ja.com

createBottomTabNavigatorで各タブに異なるアイコンを使用する方法

使ってます React Native Navigation v2私のプロジェクト用。 createBottomTabNavigatorで2つの異なるIonIconsを設定しようとしています。

彼らの site は次のような例を示します：

navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') {
      iconName = `ios-information-circle${focused ? '' : '-outline'}`;
    } else if (routeName === 'Settings') {
      iconName = `ios-options${focused ? '' : '-outline'}`;
    }

    // You can return any component that you like here! We usually use an
    // icon component from react-native-vector-icons
    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },
}),

しかし、私には、これは鈍いようです。コンポーネント自体にIonIconを定義できますか？ React Native Navigation v2を使用してシンボルを個別に定義するにはどうすればよいですか？

javascriptreactjsreact-nativereact-navigation
5
KittyCat

最も投票された答えは正しいですが、「-outline」アイコンバージョンで終わるソリューションを使用したくない場合があり、別のアイコンを使用したい場合があります。

フォーカスされたアイコンの変更（標準ベクトル）：

tabBarIcon: ({ tintColor, focused }) => (
    <Ionicons name={focused ? 
                    'ios-home' : 
                    'ios-home-outline'} 
              size={26} style={{ color: tintColor }} />
),

フォーカスされたアイコン（変更したい画像を使用）：

tabBarIcon: ({ focused }) => {
        const iconimg = focused  ? 
              require('../active.png')  : 
              require('../inactive.png')
        return (
            <Image 
                source={iconimg}
                style={styles.tabIcon}
            />
        )
    }
0
Luciano Santos