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

您发布的 JSFiddle 示例使用带有border-radius的 CSS 边框创建圆形以使其成为圆形。 我们可以在 react-native 中做几乎相同的事情，尽管 react-native 中的borderRadius只能是固定数字而不是百分比（编辑：此限制特定于打字稿，因为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}
      />

世博链接

Answer 2

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 的新手，但上面的代码段应该适用于您的情况

小吃展

Answer 3

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

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