React Native 中 fontAwesome 图标的圆形轮廓

我想使用 fontAwesome + 图标，使其位于圆圈的中间。我想将它用作一个图标项。我读到我们可以将它与圆形图标一起使用并将其放置在其中，但我无法使其工作。

import IconFA from 'react-native-vector-icons/FontAwesome';

        <IconFA
         name="plus"
         size={moderateScale(30)}
         color="black"
         style={styles.thumbnail}
         />
        {/* <IconFA
        name="circle-thin"
        size={moderateScale(67)}
        color="white"
      /> */}

  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
  },

或者，我读到了有关“堆叠”字体很棒的图标，但无法理解如何在本机反应中使用它。

参考：https://jsfiddle.net/1d7fvLy5/1/ https://jsfiddle.net/1d7fvLy5/1/

小吃博览会：

https://snack.expo.io/9Ild0Q1zG https://snack.expo.io/9Ild0Q1zG

我想做这样的事情：

我也愿意使用<Thumbnail>如果我找到类似图标的链接，但我在网上找不到任何此类免费图标。

您发布的 JSFiddle 示例使用 CSS 边框创建圆圈border-radius使其呈圆形。不过，我们可以在react-native中做几乎同样的事情borderRadius在react-native中只能是固定数字而不是百分比（编辑：此限制特定于打字稿，因为borderRadius属性有类型number。百分比字符串在运行时起作用）。

您可以根据需要调整此代码，但这将完成工作。您可以使用IconFA and CircleBorder作为两个单独的嵌套组件，但我还制作了一个组件IconInCircle将两者结合起来。

const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
  <CircleBorder
    size={circleSize}
    borderWidth={borderWidth}
    borderColor={borderColor}
  >
    <IconFA {...props} />
  </CircleBorder>
);

const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
  <View
    style={{
      width: size,
      height: size,
      borderRadius: 0.5 * size,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderColor,
      borderWidth,
    }}>
    {children}
  </View>
);

The IconInCircle组件需要三个特定于边框的属性：circleSize, borderWidth, and borderColor。所有其他道具都传递到IconFA子组件。

基本上我们正在做的是将图标放置在固定大小的内部View具有圆形边框和居中的内容。

现在我们可以像这样使用它：

      <IconInCircle
        name="plus"
        size={30}
        color="black"
        style={styles.thumbnail}
        borderWidth={1}
        circleSize={50}
      />

世博链接 https://snack.expo.io/@lindapaiste/022490