React-Native：带有嵌套视图的 ScrollView 上的 RefreshControl 不会显示动画

Question

所以我对 React Native 还很陌生，我正在尝试实现一个可刷新的联系人列表。但是我无法让它工作（可能是因为我错过了什么）。我没有收到任何错误，我根本无法下拉以获取动画。

我创建了一个包装器组件，除了 contact-list 之外，它还用作我所有其他东西的基础。

const Wrapper = ({ refreshing, onRefresh, children }) => {
    const theme = useColorScheme();

    return refreshing === null || onRefresh == null ? (
        <SafeAreaView style={{ flex: 1 }}>
            <ScrollView
                style={theme === "light" ? styles.container_light : styles.container_dark}
                contentContainerStyle={{ flexGrow: 1 }}
            >
                <View style={styles.wrapper}>{children}</View>
            </ScrollView>
        </SafeAreaView>
    ) : (
        <SafeAreaView style={{ flex: 1 }}>
            <ScrollView
                style={theme === "light" ? styles.container_light : styles.container_dark}
                contentContainerStyle={{ flexGrow: 1 }}
            >
                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
                <View style={styles.wrapper}>{children}</View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default Wrapper;

如上所示，refreshing & onRefresh 被传递到 Wrapper，因为 ScrollView 位于那里。

现在，在我的联系人列表中，我将所有联系人放入该包装器元素中，并将 refreshing 和 onRefresh 传递给包装器。我在该屏幕上还有一个 header 和一个 FloatingActionButton。屏幕占据了 100% 的高度，因为我想要屏幕右下角的 FloatingActionButton。

// outside my contact-list component:
const wait = (timeout) => {
    return new Promise((resolve) => setTimeout(resolve, timeout));
};

// in my contact-list component:
const [refreshing, setRefreshing] = useState(false);

const onRefresh = useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
}, []);


<Wrapper refreshing={refreshing} onRefresh={onRefresh}>
    <Text style={theme === "light" ? globalStyles.heading_light : globalStyles.heading_dark}>
        {t("ContactsIndexHeader")}
    </Text>

    <View style={{ marginTop: 30 }}>
        {contacts.length > 0 ? letters.map((letter) => {
            return (...); // Check last name of contact & display if equal to letter
        })
        : null}
    </View>

    <FloatingActionButton icon="plus" onPress={() => navigation.navigate("ContactsCreate")} />
</Wrapper>

Answer 1

我认为应该将刷新控件指定为属性而不是滚动视图的子项，例如：

<ScrollView
    refreshControl={
        <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh} 
        />
    }
 />

React-Native：带有嵌套视图的 ScrollView 上的 RefreshControl 不会显示动画

React-Native: RefreshControl on ScrollView with nested View won't show animation

reactjs

react-native