3

私は、特定のアイコンの可用性に応じて、さまざまなタイプの反応ネイティブ ベクター アイコン (Material と FontAwesome) を使用しています。アプリ全体でアイコンの使用をラップする共通コンポーネントを作成したかったのです。これまでのところ、私は持っています:

import React from 'react';
import Icon from "react-native-vector-icons/FontAwesome";
import {theme} from "../../../styles/style";

/**
 * Common reusable icon component
 * @param props
 * @returns {*}
 */
const icon = (props) => {
    return (
        <Icon
            size={theme.SIZE_ICON}
            color={theme.BACKGROUND_ICON_COLOR}
            {...props}
            style={props.style}/>
    );
};

export default icon;

これは FontAwesome でのみ機能します。必要に応じてマテリアル アイコンを使用できるように、prop パラメータなどに基づいて動的にするにはどうすればよいですか? 注: IconMaterial、IconFontAwesome など、タイプごとに個別のコンポーネントを作成したくありません。タイプに関係なく、コンポーネントの名前を Icon にしたいと考えています。それは可能ですか？

4

3 に答える 3

4

iconFamilyアイコン コンポーネントに呼び出される prop を渡すことができます。

アイコン コンポーネント内で、使用するすべてのフォントをインポートします。たとえば、次のようになります。

import IconFA from "react-native-vector-icons/FontAwesome";
import IconMA from "react-native-vector-icons/Material";

次に、Icon の render 関数内で:

  const Icon = (props) => {

  renderIcon = () => {
    if (props.iconFamily == "FA") {
      return (
        <IconFA
        size={23}
        {...props}
        style={props.style}/>
      );
   } 
   if (props.iconFamily == "MA") {
      return (
        <IconMA
        size={23}
        {...props}
        style={props.style}/>
      );
   }
  }
  return (
      renderIcon()
  )
}

カスタム アイコン コンポーネントを使用している場合は、iconFamily プロパティを指定するだけです。

 <Icon iconFamily="FA" name="home" color="green" /> 
 <Icon iconFamily="MA" name="code" color="red" />

出力：

出力

完全な作業例:

https://snack.expo.io/@tim1717/humiliated-hummus

于 2019-07-06T13:24:43.110 に答える