使图标在 React Native 中可供选择，而不是通过 props 发送它们

我有 svg 图标 这些是<A/>, <B/>, <C/>.

我想在中使用这些图标<MyButton>.

这就是我现在使用的方式。

我的按钮.js

function MyButton(props) {
  return (
    <TouchableOpacity>
      {props.icon}
      <Text>{props.title}</Text>
    </TouchableOpacity>
  );
}

App.js

import A from "./A";
import B from "./B";  
import C from "./C";  

function App() {
      return (
        <MyButton icon={<A/>} title={'Example'} />
      );
    }

我希望可以使用字符串选择图标，而不是使用道具发送它们。我怎样才能做到这一点？

_App.js

function App() {
      return (
        <MyButton icon={"a"} title={'Example'} />
      );
    }

您可以遵循此方法。创建一个图标对象，然后您可以将图标作为字符串从 props 传递到 MyButton 组件。

function MyButton(props) {
  const icons = {
    "a": require("./A"),
    "b": require("./B"),
    "c": require("./C")
  }
  const IconToRender = props.icon ? icons[props.icon] : null;
  return (
    <TouchableOpacity>
      {
        IconToRender ? <IconToRender/> : null
      }
      <Text>{props.title}</Text>
    </TouchableOpacity>
  );
}

Usage

 <MyButton icon="a" title="My Title" />

如果有帮助请在评论中告诉我！