React Native:刷新控件不能与ScrollView一起工作

Question

我想拉下一个scrollView并刷新这个组件，所以我遵循了官方文档中提到的onRefresh和refreshcontrol from react-n

刷新进行锻炼，但滚动不起作用。然而，当我删除contentContainerStyle={{flex: 1}}滚动开始工作，但刷新控制不工作。有办法解决这个问题吗?

export default function App() {
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(2000).then(() => setRefreshing(false));
}, [refreshing]);
return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<Text>Pull down to see RefreshControl indicator</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
scrollView: {
flex: 1,
backgroundColor: 'pink',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

确保使用React Native中的ScrollView而不是React Native手势处理程序。

Answer 2

这里的零食工作良好。它不能工作，因为contentContainerStyle是子视图。

import  React from 'react';
import { Text, View, StyleSheet,ScrollView, RefreshControl} from 'react-native';
import Constants from 'expo-constants';
const wait = (timeout) => {
return new Promise(resolve => setTimeout(resolve, timeout));
}
export default function App() {
const [refreshing, setRefreshing] = React.useState(false);
const data = [0,1,2,3,4,5,6,7,8,90,9,9,9,9,9,9,9,9,9,9]
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(2000).then(() => setRefreshing(false));
}, [refreshing]);
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}