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',
  },

另外，我读到了“堆叠”字体很棒的图标，但不明白如何在 react native 中使用它。

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

小吃博览会：

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

我想做这样的事情：

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

Answer 1

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

<View style={{
  position:'relative',
  justifyContent:'center',
  alignItems:'center',
  width:40,
  height:40,
  backgroundColor:'black'
}}>
  <IconFA name='circle-thin' size={40} color='grey'/>
  <IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />  
</View>

我是 ReactNative 的新手，但上面的 sn-p 应该适用于你的情况

Snack Expo

Answer 2

试试这个，根据自己的需要调整，也别忘了支持flex的其他浏览器。

const styles = StyleSheet.create({
  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '1px solid #333',
    borderRadius: '50%'
  },
});

Answer 3

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

您可以根据需要调整此代码，但这将完成工作。您可以将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。所有其他 props 都传递到 IconFA 子组件中。

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

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

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

Expo Link