如何在 React Native 中创建六边形视图

Question

我想使用六边形作为背景图标的组件。 我正在使用从这个 url 复制/粘贴我的代码： https : //codedaily.io/tutorials/22/The-Shapes-of-React-Native

我的代码：

六边形

return (
  <View style={styles.hexagon}>
    <View style={styles.hexagonInner} />
    <View style={styles.hexagonBefore} />
    <View style={styles.hexagonAfter} />
  </View>
);

const styles = StyleSheet.create({
  hexagon: {
    width: 100,
    height: 55
  },
  hexagonInner: {
    width: 100,
    height: 55,
    backgroundColor: 'red'
  },
  hexagonAfter: {
    position: 'absolute',
    bottom: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 25,
    borderTopColor: 'red'
  },
  hexagonBefore: {
    position: 'absolute',
    top: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 25,
    borderBottomColor: 'red'

  }
});

然后：

  <View style={{width:100,height:100}}>
    <Hexagon />
 </View>

但它返回一个红色矩形。

Answer 1

如果您遇到同样的问题，请不要制作其他组件，这将返回您想要的六边形！

像这样使用

            <View style={styles.hexagon}>
                <View style={styles.hexagonInner}>
                 <View style={styles.hexagonBefore}>
                 </View>
                </View>
                <View style={styles.hexagonAfter}></View>
              </View>