Question

我正在使用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>

我在做什么错了？

Answer 1

我建议使用 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)}
/>

Answer 2

根据，

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

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

修改

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

Answer 3

我想问一下你有什么功能

onFinishRating={this.ratingCompleted}

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

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

评分未选择超过3星-React Native Elements-评分）

3 个答案: