求助：为Android React Native应用添加1-10分星级评分弹窗

方案一：自定义实现（无依赖，最稳定） #

直接用React Native原生的Modal组件搭配基础交互组件实现，完全可控，不会出现第三方库的构建/安装问题。

完整代码示例 #

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

const RatingModal = ({ visible, onClose, onSubmitRating }) => {
  const [selectedRating, setSelectedRating] = useState(0);

  const handleRatingSelect = (rating) => {
    setSelectedRating(rating);
  };

  const handleSubmit = () => {
    if (selectedRating > 0) {
      onSubmitRating(selectedRating);
      onClose();
    }
  };

  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.modalOverlay}>
        <View style={styles.modalContainer}>
          <Text style={styles.title}>为我们评分</Text>
          <View style={styles.ratingContainer}>
            {Array.from({ length: 10 }).map((_, index) => {
              const rating = index + 1;
              return (
                <TouchableOpacity
                  key={index}
                  style={[
                    styles.star,
                    selectedRating >= rating ? styles.starFilled : styles.starEmpty
                  ]}
                  onPress={() => handleRatingSelect(rating)}
                >
                  <Text style={styles.starText}>★</Text>
                </TouchableOpacity>
              );
            })}
          </View>
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
              <Text style={styles.cancelButtonText}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={[styles.submitButton, selectedRating === 0 && styles.submitButtonDisabled]}
              onPress={handleSubmit}
              disabled={selectedRating === 0}
            >
              <Text style={styles.submitButtonText}>提交</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    width: '85%',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 20,
  },
  ratingContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    marginBottom: 25,
  },
  star: {
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  starEmpty: {
    opacity: 0.3,
  },
  starFilled: {
    opacity: 1,
  },
  starText: {
    fontSize: 24,
  },
  buttonContainer: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
  },
  cancelButton: {
    width: '48%',
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
  },
  cancelButtonText: {
    fontSize: 16,
    fontWeight: '500',
  },
  submitButton: {
    width: '48%',
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#2196F3',
    alignItems: 'center',
  },
  submitButtonDisabled: {
    backgroundColor: '#90CAF9',
  },
  submitButtonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#fff',
  },
});

// 组件使用示例
const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const handleRatingSubmit = (rating) => {
    console.log('用户评分:', rating);
    // 此处可添加评分上传、本地存储等逻辑
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setModalVisible(true)}>
        <Text>打开评分弹窗</Text>
      </TouchableOpacity>
      <RatingModal
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
        onSubmitRating={handleRatingSubmit}
      />
    </View>
  );
};

export default App;

核心优势 #

• 完全自定义UI，可根据需求调整星级样式、弹窗尺寸、颜色等
• 无第三方依赖，避免版本兼容、构建失败等问题
• 适配Android全版本，兼容性拉满

方案二：基于成熟评分组件实现 #

若想减少自定义工作量，可使用react-native-ratings搭配原生Modal实现，该库维护状态稳定，兼容性较好。

实现步骤 #

1. 安装依赖：

npm install react-native-ratings --save
# 或使用yarn
yarn add react-native-ratings

2. 弹窗实现代码：

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

const RatingModal = ({ visible, onClose, onSubmitRating }) => {
  const [rating, setRating] = useState(0);

  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.modalOverlay}>
        <View style={styles.modalContainer}>
          <Text style={styles.title}>请评分（1-10星）</Text>
          <Rating
            type="star"
            ratingCount={10}
            imageSize={30}
            startingValue={0}
            onFinishRating={setRating}
            style={{ marginVertical: 20 }}
          />
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
              <Text style={styles.cancelButtonText}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={[styles.submitButton, rating === 0 && styles.submitButtonDisabled]}
              onPress={() => {
                if (rating > 0) {
                  onSubmitRating(rating);
                  onClose();
                }
              }}
              disabled={rating === 0}
            >
              <Text style={styles.submitButtonText}>提交</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

// 样式及使用示例可复用方案一的对应部分

排障提示 #

• 若安装后出现构建问题，RN 0.60+版本无需手动链接，直接清理缓存重试：

rm -rf node_modules && npm install
npx react-native clean

内容的提问来源于stack exchange，提问作者Nishanth Reddy B