问题描述
如果用户输入数字 4 ,则生成的形状将变为正方形。如果用户输入 9 ,则该形状将变为非三角形。 这应该是一个反应性的解决方案:) 有什么想法吗?
解决方法
代码应该是不言自明的。您可以在圆上找到这些点,然后借助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',});