在 React Native 应用程序中的常规视图上向下滑动进行刷新

Question

有没有一种方法可以在常规视图上以本机方式向下滑动以刷新，而无需使用 FlatList 或 ScrollView 之类的东西？

Answer 1

没有内置解决方案可以执行此操作。我们通常希望为用户提供某种反馈，因此常规的

pull to refresh

操作是一个合适的选择，这显然只适用于某种

scrollable container

。

但是，如果我们仍然不想使用

ScrollView

来实现此目的，那么我们可以监听触摸手势并在一定阈值后做出反应，如下所示。

const SomeRefreshableNonScrollableComponent = (props) => {
   const y = useRef()

   function onRefresh() {
        // refresh or whatever
   }

   return (
    <View
      style={{flex :1}}
      onTouchStart={e=> y.current = e.nativeEvent.pageY}
      onTouchEnd={e => {
        // some threshold. add whatever suits you
        if (y.current - e.nativeEvent.pageY < 40) {
          onRefresh()
        }
      }}>

     ...

    </View>
  )
}

编辑：作为评论的答案。

我们可以为嵌套在不可滚动的

FlatList

中的

ScrollView

实现下拉刷新机制，如下所示。

const [data, setData] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  const [refresh, setRefresh] = useState(false)

  useEffect(() => {

    if (refresh) {
      console.log("Refresh my inner data on pull")
    }
  }, [refresh])

  return (
    <ScrollView scrollEnabled={false} nestedScrollEnabled={true}>
      <FlatList refreshing={refresh} onRefresh={() => setRefresh(true)} data={data} renderItem={({item}) => {
        return <Text>Hello world</Text>
      }} />
    </ScrollView>
  );
};

请注意，刷新操作完成后，您必须将

refresh

状态重置回

false

，例如如果 API 调用返回其数据。否则，Flatlist 将继续显示刷新指示器。

Answer 2

这是添加刷新的方法之一。我将视图包裹在平面列表上方以实现刷新

<View style={[styles.wrapper]}>
          <ScrollView
            scrollEnabled={false}
            nestedScrollEnabled={true}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={onRefresh}
                tintColor={palette.blue}
                colors={[palette.blue, palette.green, palette.red]}
              />
            }>
            {status === 'draft' && (
              <TouchableOpacity
                style={[styles.editInfo]}
                onPress={() => {
                 //code to handle on press
                }}>
                <Text style={[styles.editText]}>
                  {nomenclature.edit}
                </Text>
                <CustomIcon
                  name={'edit'}
                  type={'Feather'}
                  size={14}
                  color={palette.blue_1}
                />
              </TouchableOpacity>
            )}

            <DetailsSection data={data} list={list} />
          </ScrollView>

          <FlatList
            data={list}
            renderItem={renderItem}
            keyExtractor={item => item?.id?.toString()}
            showsVerticalScrollIndicator={false}
            style={[cashCollectionDetailsStyles.list]}
            contentContainerStyle={[styles.listContainer]}
            ListEmptyComponent={
              <View style={[styles.emptyWrapper]}>
                <NoTaskFound title={nomenclature.no_applications_found} />
              </View>
            }
            windowSize={7}
            maxToRenderPerBatch={15}
            initialNumToRender={15}
            removeClippedSubviews={true}
          />
        </View>