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

【问题标题】：Rating not choosing more than 3 stars - React Native Elements - Rating)评级不选择超过 3 星 - React Native Elements - 评级）
【发布时间】：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>

我做错了什么？

【问题讨论】：

标签： react-native rating

【解决方案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>

【讨论】：