React Native:如何绘制边数随机的形状(边数将是用户输入值)

Question

如果用户输入的数字4，生成的形状将变成正方形。如果用户输入9，则形状将变为非多边形。这应该是一个react原生解决方案：(有什么想法吗？

Answer 1

代码应该是不言自明的。定位圆上的点，并在svg多边形的帮助下用线连接它们。

零食

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Text, TextInput } from 'react-native';
import Svg, { Polygon } from 'react-native-svg';
import Constants from 'expo-constants';
export default function App() {
const windowWidth = Dimensions.get('window').width;
const Center = windowWidth / 2;
const Radius = Center - 20;
const [numSides, setNumSides] = useState(3);
const [polygonPoints, setPolygonPoints] = useState();
useEffect(() => {
let newPolyPoints = '';
const angle = 2 * Math.PI / numSides;
for (let side = 0; side < numSides; side++) {
const x = Math.cos(angle * side) * Radius + Center;
const y = Math.sin(angle * side) * Radius + Center;
newPolyPoints = `${newPolyPoints} ${x},${y}`;
}
setPolygonPoints(newPolyPoints);
}, [numSides]);
const inputIsValid = t => {
const int = parseInt(t, 10);
return isNaN(int) === false && int >= 3;
}
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<Text style={styles.label}>
{'Number of sides: '}
</Text>
<TextInput
style={styles.textInput}
defaultValue={numSides.toString()}
selectTextOnFocus
onChangeText={t => {
if (inputIsValid(t)) {
const int = parseInt(t, 10);
setNumSides(int);
}
}}
/>
</View>
<Svg style={styles.svg} width={windowWidth} height={windowWidth}>
<Polygon
points={polygonPoints}
fill="lime"
stroke="purple"
strokeWidth="1"
/>
</Svg>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 20,
marginHorizontal: 12,
},
label: {
fontSize: 18,
},
textInput: {
backgroundColor: 'white',
flex: 1,
fontSize: 18,
},
svg: {
aspectRatio: 1,
backgroundColor: 'tomato',
},
});