yangxiangyuan
88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { View, StyleSheet, Dimensions } from 'react-native';
|
|
import { theme } from '../theme';
|
|
|
|
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
|
|
|
|
interface Star {
|
|
x: number;
|
|
y: number;
|
|
size: number;
|
|
isGold: boolean;
|
|
}
|
|
|
|
const generateStars = (count: number, size: number, isGold: boolean = false): Star[] => {
|
|
const stars: Star[] = [];
|
|
for (let i = 0; i < count; i++) {
|
|
stars.push({
|
|
x: Math.random() * SCREEN_WIDTH,
|
|
y: Math.random() * SCREEN_HEIGHT,
|
|
size,
|
|
isGold,
|
|
});
|
|
}
|
|
return stars;
|
|
};
|
|
|
|
const StarComponent: React.FC<Star> = ({ x, y, size, isGold }) => {
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.star,
|
|
{
|
|
left: x,
|
|
top: y,
|
|
width: size,
|
|
height: size,
|
|
borderRadius: size / 2,
|
|
backgroundColor: isGold ? theme.colors.primary : theme.colors.text,
|
|
opacity: 0.6 + Math.random() * 0.4,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const Starfield: React.FC = () => {
|
|
const smallStars = useMemo(() => generateStars(30, 1), []);
|
|
const mediumStars = useMemo(() => generateStars(15, 1.5), []);
|
|
const largeStars = useMemo(() => generateStars(8, 2, true), []);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Radial gradient background simulation */}
|
|
<View style={styles.radialGlow} />
|
|
|
|
{/* Stars */}
|
|
{smallStars.map((star, i) => (
|
|
<StarComponent key={`small-${i}`} {...star} />
|
|
))}
|
|
{mediumStars.map((star, i) => (
|
|
<StarComponent key={`medium-${i}`} {...star} />
|
|
))}
|
|
{largeStars.map((star, i) => (
|
|
<StarComponent key={`large-${i}`} {...star} />
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
radialGlow: {
|
|
position: 'absolute',
|
|
top: SCREEN_HEIGHT * 0.2,
|
|
left: SCREEN_WIDTH / 2 - 150,
|
|
width: 300,
|
|
height: 300,
|
|
borderRadius: 150,
|
|
backgroundColor: theme.colors.primarySoft,
|
|
},
|
|
star: {
|
|
position: 'absolute',
|
|
},
|
|
});
|