评级不选择超过 3 星 - React Native Elements - 评级）

Posted 2023-02-19

【中文标题】评级不选择超过 3 星 - React Native Elements - 评级）

【英文标题】：Rating not choosing more than 3 stars - React Native Elements - Rating)

【发布时间】：2019-04-13 23:51:10

【问题描述】：

我正在使用 react-native-elements 组件中的 Rating Element。我注意到我不能为我的评分选择多于/少于 3 星，我不明白为什么。 这是我的代码：

<Modal animationType="slide" transparent=false
                visible=this.state.showModal
                onDismiss=() => this.openModal()
                onRequestClose=() => this.openModal()>
                <View style=styles.modal>
                    <Text style=styles.modalTitle>Rating</Text>
                    <Rating
                        showRating
                        type="star"
                        imageSize=30
                        onFinishRating=this.ratingCompleted
                        style= paddingVertical: 10 
                    />

                    <View style=styles.btnView>
                        <Button
                            onPress=() =>  this.handleFormSubmit() 
                            color="#512DA8"
                            title="Submit"
                            style=styles.formBtn
                        />
                        <Button
                            onPress=() =>  this.openModal(); 
       this.resetForm(); 
                            color="gray"
                            title="Cancel"
                        />
                    </View>
                </View>
            </Modal>

我做错了什么？

【参考方案1】：

根据，

https://react-native-training.github.io/react-native-elements/docs/rating.html#ratingcount

您可以使用道具ratingCount 设置要显示的评分图像的数量。 尝试将此设置为 3 以外的其他值。

编辑

似乎我误解了查询，请尝试将readonly 明确设置为false。

【讨论】：

ratingCount 是 5。它显示的是 5 颗星。问题是，它不允许评分少于/多于 3 星。即无论我点击哪颗星，只有 3 颗阴影星

【参考方案2】：

我建议使用 AirbnbRating 而不是 Rating，因为它对我有用。

示例代码：

import AirbnbRating  from 'react-native-elements';

<AirbnbRating
  count=11
  reviews=["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]
  defaultRating=11
  size=20
onFinishRating=rating => console.log(rating)
/>

【讨论】：

这给了Animated: `useNativeDriver` was not specified. This is a required 'option and must be explicitly set to `true` or `false

【参考方案3】：

我想问你有什么功能

onFinishRating=this.ratingCompleted

我也在我的项目中使用了这个组件并更新了那里的状态：

        <Rating
          showRating
          startingValue=4
          onFinishRating=rating => this.setState( rating: rating )
        />

【参考方案4】：

在返回评分的函数中移动评分组件：

注意：这有点奇怪，但对我有用

如下更改您的代码：

const RatingView=()=>
   return (
            <Rating
                showRating
                type="star"
                imageSize=30
                onFinishRating=this.ratingCompleted
                style= paddingVertical: 10 
             />
   )

你的模态：

<Modal animationType="slide" transparent=false
                visible=this.state.showModal
                onDismiss=() => this.openModal()
                onRequestClose=() => this.openModal()>
                <View style=styles.modal>
                    <Text style=styles.modalTitle>Rating</Text>
                    <RatingView /> // Here ...

                    <View style=styles.btnView>
                        <Button
                            onPress=() =>  this.handleFormSubmit() 
                            color="#512DA8"
                            title="Submit"
                            style=styles.formBtn
                        />
                        <Button
                            onPress=() =>  this.openModal(); 
       this.resetForm(); 
                            color="gray"
                            title="Cancel"
                        />
                    </View>
                </View>
            </Modal>