标签: react-native-flatlist

我正在尝试使用 FlatList 进行 flexGrow，但它无法像使用 ListView 那样工作。即使屏幕上有空间，项目也会以 minWidth 值进行渲染。示例代码：

class ProductListScreen extends Component {
    render () {
    return (<FlatList
    contentContainerStyle={styles.list}
    showsVerticalScrollIndicator={false}
    data={[{key: 'a'}, {key: 'b'},{key: 'c'},{key: 'd'}, {key: 'e'},{key: 'f'},{key: 'g'}, {key: 'h'},{key: 'i'},{key: 'j'}]}
    renderItem={this.renderItem}
    />);
    renderItem({ item, index }) {
    return <View style={{
    flexGrow: 1,
    margin: 5,
    minWidth: 154,
    maxWidth: 223,
    height: 304,
    maxHeight:304,
    backgroundColor: '#CCC',
    }}/>;
    }
}
    var styles = StyleSheet.create({
      list: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap'
      })

ReactNative文档提到FlatList该页面具有“滚动加载”功能： https: //facebook.github.io/react-native/docs/flatlist.html

有谁知道这个功能的例子吗？

我正在尝试实现一个非常常见的用例。这个想法很简单，下载/播放当前在平面列表中显示的视频，暂停/不下载其余部分。

这是我的FeedCard->MyFlatListItem

class FeedCard extends PureComponent {

    constructor(props){
        super(props);
        this.state = {
            pauseVideo: true
        };
    }

    playThisVieo = (playVideo) => {
      this.setState({
          pauseVideo: !playVideo
      });
    };

    render() {
        return (
            <Card>
                <CardItem cardBody>
                    <View style={styles.preview}>
                        <Video
                            source={{ uri: this.props.videoURL}}
                            ref={(ref) => {
                                this.player = ref;
                            }}
                            rate={1.0}
                            volume={1.0}
                            muted={false}
                            paused={this.state.pauseVideo}
                            resizeMode="stretch"
                            repeat={true}
                            playInBackground={false}
                            playWhenInactive={false}
                            ignoreSilentSwitch={"ignore"}
                            progressUpdateInterval={250.0}
                            onLoadStart={() => this.player.seek(0)}
                            onLoad={this.setDuration}
                            onProgress={this.setTime}
                            onEnd={this.onEnd}
                            onError={this.videoError}
                            onBuffer={this.onBuffer}
                            onTimedMetadata={this.onTimedMetadata}
                            style={{
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                bottom: 0,
                                right: 0,
                            }} …

我的任务是过滤一些数组并将其设置为 FlatList。

我的过滤功能是：

updateInvoiceList = (text) => {
  let invoiceList = [...this.state.baseInvoiceList];
    invoiceList = invoiceList.filter(el => {
     return el.name.toLowerCase().includes(text.toLowerCase())
    });
  this.setState({invoiceList})
}

过滤后，我将 state.invoiceList 提供给 FlatList 并且一切正常。但是，当我设置一些不存在于我的数组中的符号时，例如“！”，该函数会清除数组并且它仍然可以正常运行。当我删除符号“！”时，我得到一个错误屏幕：

 index=10 count=0
addInArray
    ViewGroup.java:5235
addViewInner
    ViewGroup.java:5128
addView
    ViewGroup.java:4935
addView
    ReactViewGroup.java:452
addView
    ViewGroup.java:4875
addView
    ReactViewManager.java:269
addView
    ReactViewManager.java:36
manageChildren
    NativeViewHierarchyManager.java:346
execute
    UIViewOperationQueue.java:227
run
    UIViewOperationQueue.java:917
flushPendingBatches
    UIViewOperationQueue.java:1025
access$2600
    UIViewOperationQueue.java:46
doFrameGuarded
    UIViewOperationQueue.java:1085
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:166
doFrame
    ChoreographerCompat.java:84
run
    Choreographer.java:964
doCallbacks
    Choreographer.java:790
doFrame
    Choreographer.java:721
run
    Choreographer.java:951
handleCallback
    Handler.java:883
dispatchMessage
    Handler.java:100
loop
    Looper.java:214
main
    ActivityThread.java:7356
invoke
    Method.java
run …

如何多选并突出显示 react native flatlist 中的组件。我已经检查了文档。但这有点令人困惑，有人可以帮助我。我已经使用这种方法完成了单选。任何人都可以将其修改为多选。我将在我完成单选的地方提供小吃链接

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

const Data = [
  {
    id: 1,
    first_name: 'Sile',
  },
  {
    id: 2,
    first_name: 'Clementia',
  },
  {
    id: 3,
    first_name: 'Brita',
  },
  {
    id: 4,
    first_name: 'Duke',
  },
  {
    id: 5,
    first_name: 'Hedvig',
  },
  {
    id: 6,
    first_name: 'Paulie',
  },
  {
    id: 7,
    first_name: 'Munmro',
  },
  {
    id: 8,
    first_name: 'Dyanna', …

在 React Native 中使用 FlatList 组件时，我需要知道所有可见项何时都已呈现。

我正在提供data，renderItem当我得到时，componentDidMount我可以在那里看到 FlatList，但是因为 FlatList 组件异步呈现每个项目，它们只在 on 之后显示componentDidUpdate。此外，这可能（并且可能会）包括非视图项目。

我想知道是否有人找到了一种可能的方法来控制过程（而不是与setTimeout）知道可见项目何时完全呈现。

谢谢。

在我的 ReactNative 应用程序中，我使用“SafeAreaView”来限制我在可见区域中的内容。我的应用程序以横向模式运行。看图

我有一个带有标题的 FlatList。当我现在拉动刷新时，标题与所有列表项一起下降：

但我希望它保持在顶部，以便只下拉项目：

如果我将我的标头组件放在 FlatList 内而不是在它之前，则可以实现这种行为。但是，它不适合，因为标题将始终保持在顶部，但我需要它与列表项一起滚动，就好像它是列表的一部分一样。我怎样才能做到这一点？

我曾尝试在 onScroll 事件中为标题设置负边距，但它看起来一点也不平滑并会导致奇怪的效果。

我很感激你关于如何做到这一点的想法。

是否可以使用 React Native Web实现 Flatlist，在其中预先添加数据，同时保持可见内容？

现在，当您添加某些内容时，它会跳到 Flatlist 的顶部。我使用onContentSizeChange在更新后强制移动滚动位置，但体验很糟糕，因为有时更新前会有很大的延迟。检查这个松弛看看我的意思：https : //snack.expo.io/@divone/prepend-data-to-flatlist-on-web

有没有人成功地使用 React Native Web 实现类似 Chat 的 Flatlist？如果是，如何实现？

编辑：我发现在 react native web 上，当您预先添加数据IF AND ONLY IF滚动条不在屏幕顶部时，内容可见性会自动保持。（点心）

所以我的问题仍然存在......即使滚动条一直向上滚动，如何预先添加数据并保持可见性？

所以我最近尝试在 firebase 中对用户进行 FlatList 搜索，但我遇到了一堆错误，尽管代码中似乎没有错误。目前，该列表搜索并没有返回任何内容，尽管“用户”的 firebase 集合中有明确的数据。当我尝试在 getUsers() 中 Promise 的解析语句正上方记录“结果”时，我突然看到了用户，虽然我得到“结果”不存在的错误，这很奇怪，因为为什么会出现错误使代码工作？无论如何，如果有人能够帮助我尝试使这个 FlatList 工作，我将不胜感激。我已经为此工作了 3 天，似乎无法在线找到任何解决方案或修复代码。为了你的帮助，我很乐意给你一个邓肯甜甜圈，因为这对我来说意义重大。我感谢所有帮助和提示，并提前感谢您的时间！（我的平面列表的代码在下面，没有样式）

import React, { useState, useContext, useEffect } from "react";
import {
    View,
    Text,
    StyleSheet,
    StatusBar,
    TextInput,
    ScrollView,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    FlatList,
} from "react-native";
import { FirebaseContext } from "../context/FirebaseContext";
import { UserContext } from "../context/UserContext";
import { FontAwesome5, Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import _ from "lodash";
import "firebase/firestore";
import firebase from "firebase";
import config from "../config/firebase";

const SearchScreen …