React Native Class组件中RefreshControl下拉刷新不生效问题求助

问题排查及修复 #

以下是导致刷新无响应的明确错误，按优先级修复即可：

• 1. ScrollView禁用了滚动：你给ScrollView设置了scrollEnabled={false}，滚动被禁止后无法触发下拉手势，刷新逻辑自然不会被调用，删掉这个属性即可，默认值就是开启滚动。
• 2. 回调取值错误：onRefresh是你定义的类方法，并没有存在state中，你从this.state解构拿到的onRefresh是undefined，相当于没有给RefreshControl传刷新回调，直接使用this.onRefresh传参即可。
• 3. 标签嵌套错误：代码中ScrollView标签未正确闭合，且层级顺序错乱，需要修正标签的闭合顺序。

修复后的完整代码

export default class ServiceTicket extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing : false,
        }
    }

    onRefresh = () =>{
        this.setState({refreshing :  true });
        setTimeout(() => {  this.setState({refreshing :  false }); }, 5000);       
        console.log("done!")
    };

    render() {
        // 这里renderItem你暂时没用，后续接FlatList的时候可以用，现在属于冗余代码
        const renderItem = ({ item }) => ( <Item title={item.title} Serial={item.Serial}/> );
        const { refreshing } = this.state

        return(
            <>
                <View style={styles.item}>
                    <SafeAreaView>
                        {/* 删掉scrollEnabled={false}，修正RefreshControl的onRefresh取值 */}
                        <ScrollView
                            refreshControl={<RefreshControl refreshing={refreshing}  onRefresh={this.onRefresh} /> }
                        >
                            <Card borderRadius={25} style={{paddingRight: 15}} >
                                <Card.Content>
                                    <View style={styles.parent}>
                                        <View style={styles.imgContainer}>
                                            <Image
                                                source={require('../assets/img/userAvt.png')}
                                                style={styles.image}
                                            />
                                            {/* <Text> {profile.user.photoUrl} </Text> */}
                                        </View>
                                        <View style={styles.textContainer}>
                                            <Text style={{ fontWeight: 'bold' }}>Customer Name</Text>
                                            <View style={{ flexDirection: 'row' }}>
                                                <Text style={{ fontWeight: 'bold' }}>
                                                    #data.id </Text>
                                                    {/* <Text> at {data.visitingAdd1}</Text> */}
                                            </View>
                                            <Text >data.visitingAdd1</Text>
                                            <Text >data.visitingAdd2</Text>
                                            <Text >data.visitingAdd3</Text>
                                            <Text style={{ fontWeight: 'bold' }}>Contact Person</Text>
                                            <Text style={{ fontWeight: 'bold' }}>Concern data.topic</Text>
                                            <Text style={{ fontWeight: 'bold' }}>Warranty Status </Text>
                                            <View style={styles.devider} />
                                            <Text>data.createdAt</Text>
                                        </View>
                                    </View>
                                </Card.Content>
                            </Card>
                        {/* 补充ScrollView的闭合标签 */}
                        </ScrollView>
                    </SafeAreaView>
                </View>
            </>
        )
    }
}

内容的提问来源于stack exchange，提问作者Ryan Fonseka