字体的圆圈轮廓 [英] circle outline for fontAwesome icons in react native

问题描述

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

 从'react-native-vector-icons/FontAwesome'导入IconFA;< IconFA名称=加"大小= {moderateScale(30)}color =黑色"style = {styles.thumbnail}/>{/*< IconFAname =圆薄"大小= {moderateScale(67)}color =白色"；/>*/}缩略图:{高度:68，宽度:68，位置:相对"，}， 

或者，我读到有关堆叠式"字体超赞图标的信息，但无法理解如何在React Native中使用它.

参考:

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

解决方案

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

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

  const IconInCircle =({circleSize，borderWidth = 2，borderColor ='black'，... props})=>(< CircleBorder大小= {circleSize}borderWidth = {borderWidth}borderColor = {borderColor}>< IconFA {... props}/></CircleBorder>);const CircleBorder =({size，borderWidth，borderColor，children})=>(<查看样式= {{宽度:大小，高度:大小，borderRadius:0.5 *大小，显示:"flex"，justifyContent:中心"，alignItems:'中心'，边框颜色，borderWidth，}}>{孩子们}</View>); 

IconInCircle 组件具有三个特定于边框的道具: circleSize ， borderWidth 和 borderColor .所有其他道具都传递到 IconFA 子组件中.

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

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

 < IconInCircle名称=加"大小= {30}color =黑色"style = {styles.thumbnail}borderWidth = {1}circleSize = {50}/> 

博览会链接

I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place it inside that but I couldn't make it work.

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

Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.

Reference: https://jsfiddle.net/1d7fvLy5/1/

Snack Expo:

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

I want to make something like this:

I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.

解决方案

The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).

You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.

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 component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.

Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.

Now we can use it like so:

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

Expo Link

这篇关于字体的圆圈轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！