如何在 React Native 中实现 Font Awesome 堆栈图标功能答案

【问题标题】：How to achieve Font Awesome stack icons feature in react native如何在 React Native 中实现 Font Awesome 堆栈图标功能
【发布时间】：2020-01-02 05:11:24
【问题描述】：

使用 React native 实现堆栈/重叠图标。

我正在尝试在本机反应中实现这样的目标： https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

如何做到这一点？

【问题讨论】：

您想在您的项目中使用自定义图标吗？如github.com/oblador/react-native-vector-icons#custom-fonts 中所述？
是的。我目前在我的项目中使用矢量图标。而不是使用自定义字体，我试图找到我是否可以堆叠多个图标来创建另一个图标，就像我上面提到的链接一样。

标签： reactjs react-native font-awesome react-native-vector-icons

【解决方案1】：

输出：

在此示例中，我将 FontAwesome 图标“正方形”和“主页”堆叠在一起。要堆叠它们，您需要一个带有position: 'relative' 的父视图。然后你可以将position: 'absolute'和一个zIndex应用到应该在另一个上面的图标上。之后，您可以使用顶部/左侧样式属性来定位图标。

代码：

  <View style={{position: 'relative'}}>
         <Icon name="square" size={24} color={"black"} />
         <Icon 
          name="home" 
          size={24} 
          color={"white"} 
          style={{position: 'absolute', zIndex: 99, left: 0, top: 0}} />  
  </View>

演示：

https://snack.expo.io/rkHnZJrrH

【讨论】：

谢谢。但是当我们迁移到不同的平台时，zIndex 可能会出现问题

【解决方案2】：

您可以通过这样做来实现这一点。使用宽度和高度可以帮助您将视图保持在原位并将所有内容对齐到中心，使其看起来像堆叠的图标。

<View style={{
        position:"relative",
        justifyContent:'center',
        alignItems:"center",
        width:40,
        height:40
      }}>
         <Icon name="circle" size={34} color={"black"} />
         <Icon name="flag" size={20} color={"white"} style={{position: 'absolute', zIndex: 99}} />  
      </View>

https://snack.expo.io/HkxWerHBr

【讨论】：

【解决方案3】：

能够通过反应原生元素实现这样的效果[不确定它们是否在内部使用 zIndex]

render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            position: 'relative',
            height: 64,
            width: 64,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Icon type="font-awesome" name="square" size={64} />
          <Icon
            type="font-awesome"
            name="twitter"
            color="white"
            size={32}
            containerStyle={{ position: 'absolute' }}
          />
        </View>
      </View>
    );
  }

容器样式为

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }

零食回购：

https://snack.expo.io/@roach_iam/vigorous-blueberries

【讨论】：