React Native 中 fontAwesome 图标的圆形轮廓

Question

我想使用 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://snack.expo.io/9Ild0Q1zG

我想做这样的事情：

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

Answer 1

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

您可以根据需要调整此代码，但这将完成工作。您可以使用IconFA和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>
);

该IconInCircle组件采用三个特定于边框的属性：circleSize、borderWidth和borderColor。所有其他道具都会传递到IconFA子组件中。

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

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

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

世博链接