javascript - Reac-Native：带边框的六边形

Question

在我的反应本机应用程序中，我想要一个有边框的六边形，我试图通过在另一个之前有两个六边形来实现这一点，但是对于更大的六边形（2）我似乎无法获得正确的尺寸，我得到了在这个受祝福的网站上发布的第一个六边形，有人可以帮助我吗？

<View style={{width:125,height:125,position:'relative',alignItems:'center',justifyContent:'center'}}>
                        <View style={styles.hexagon2}>
                            <View style={styles.hexagonInner2}>
                                <View style={styles.hexagonBefore2}></View>
                            </View>
                            <View style={styles.hexagonAfter2}></View>
                        </View>
                        <View style={{width:125,height:125,position:'absolute',top:0,left:0,alignItems:'center',justifyContent:'center'}}>
                            <View style={styles.hexagon}>
                                <View style={styles.hexagonInner}>
                                    <View style={styles.hexagonBefore}></View>
                                </View>
                                <View style={styles.hexagonAfter}></View>
                            </View>
                        </View>
                    </View>

六边形样式：

const styles = StyleSheet.create({
//this one is the small hexagon, no need to touch this one
  hexagon: {
    width: 100,
    height: 55
  },
  hexagonInner: {
    width: 100,
    height: 55,
    backgroundColor: 'rgb(1,121,111)'
  },
  hexagonAfter: {
    position: 'absolute',
    bottom: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 25,
    borderTopColor: 'rgb(1,121,111)'
  },
  hexagonBefore: {
    position: 'absolute',
    top: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 25,
    borderBottomColor: 'rgb(1,121,111)'

  },

//This ine is the bigger hexagon, the border
  hexagon2: {
    width: 100,
    height: 55,
    
  },
  hexagonInner2: {
    width: 100,
    height: 55,
    backgroundColor: 'rgb(1,121,111)',
    
  },
  hexagonAfter2: {
    position: 'absolute',
    bottom: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 25,
    borderTopColor: 'red'
  },
  hexagonBefore2: {
    position: 'absolute',
    top: -25,
    left: 0,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 25,
    borderBottomColor: 'red'

  }
});

标签： javascriptreact-native

Answer 1

react-native-svg您可以使用可以制作复杂形状的库来执行此操作。我在这里制作的示例（https://snack.expo.dev/@heytony01/blissful-coffee）和下面的代码。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import Svg, { Polygon } from 'react-native-svg';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const Hexagon = () =>{
  return (
  
        <Svg height="300" width="300" >
                <Polygon
                  points="00,150 225,280 75,280 0,150 75,20 225,20 300,150 225,280 75,280 0,150 75,20 225,20 300,150 225,280 75,280 0,150,                     75 20 225,20"
                  fill="lime"
                  stroke="lime"
                  strokeWidth="1"
                
                >
                </Polygon>
              </Svg>
  )
}


export default function App() {
  return (
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
         
           <Hexagon />
    
    
    </View>
  );
}