如何将星级添加到React Native中的Alert组件？

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const StarAlert = ({ title, description, onConfirm }) => {
  const [rating, setRating] = useState(0);

  const handleRating = (selectedRating) => {
    setRating(selectedRating);
  };

  const handleConfirm = () => {
    onConfirm(rating);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
      <View style={styles.ratingContainer}>
        {[1, 2, 3, 4, 5].map((star) => (
          <TouchableOpacity
            key={star}
            onPress={() => handleRating(star)}
          >
            <Text
              style={[
                styles.star,
                star <= rating && styles.selectedStar,
              ]}
            >
              ★
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={handleConfirm}>
          <Text style={styles.confirmButton}>确认</Text>
        </TouchableOpacity>
        {/* 添加取消按钮的逻辑 */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  description: {
    fontSize: 16,
    marginBottom: 16,
  },
  ratingContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 16,
  },
  star: {
    fontSize: 24,
    color: '#000',
  },
  selectedStar: {
    color: '#FFD700',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  confirmButton: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#007BFF',
  },
});

export default StarAlert;

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import StarAlert from './StarAlert';

const MyComponent = () => {
  const handleConfirm = (rating) => {
    // 处理用户选择的星级评分
    console.log('用户选择的星级评分:', rating);
  };

  const showStarRating = () => {
    StarAlert({
      title: '请为我们的应用评分',
      description: '请给予您的宝贵评分以帮助我们改进应用。',
      onConfirm: handleConfirm,
    });
  };

  return (
    <View>
      <TouchableOpacity onPress={showStarRating}>
        <Text>显示星级评分弹窗</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyComponent;