标签: react-native-flatlist

我遇到了FlatList的initialScrollIndex问题 - 只是忽略了initialScrollIndex的参数,并显示了第一个项目.

https://snack.expo.io/Bk1mkK0zZ

如果我将平面列表放在一个视图中,那么我的onEndReached将无限触发,如果我删除封闭的视图onEndReached根本不会被触发.

 render() {
    return (
        <Root>
            <Container>
                <Content>
                    <View>
                        {this.state.listView && (
                            <FlatList
                                data={this.state.variants}
                                keyExtractor={this._keyExtractor}
                                onEndReachedThreshold={0.5}
                                onEndReached={({ distanceFromEnd }) => {
                                    console.log(
                                        "on end reached ",
                                        distanceFromEnd
                                    );
                                    this.loadMore();
                                }}
                                numColumns={1}
                                renderItem={({ item, index }) => (
                                    <CatalogRow
                                        item={item}
                                        in_wishlist={this.state.in_wishlist}
                                        toggleWishlist={() =>
                                            this.toggleWishlist(item.title)
                                        }
                                        listView={this.state.listView}
                                    />
                                )}
                            />
                        )}
                    </View>
                </Content>
            </Container>
        </Root>
    );
}

distanceFromEnd当它被摧毁时,我的值为0,960,1200.它表明了什么？我正在使用react-native 0.47.2

我已经使用这个FlatList,在这里我呼吁renderRow在我所编写的代码来呈现列表中的项目功能,我怎样才能获得rowId的每一行renderer的renderRow方法？

<List containerStyle={{borderTopWidth:0 , borderBottomWidth:0}}>
        <FlatList data={this.state.horseList}
        renderItem={(item) => this.renderRow(item)}
        _keyExtractor ={item => item.id} 
        onRefresh={this.handleRefresh}
        refreshing={this.state.refreshing}
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={1}
        ListFooterComponent={this.renderFooter}
        onRefresh={this.handleRefresh}
        />
    </List>

FlatList有numColumns支持.如何numColumns使用SectionList进行设置？

Github问题:SectionList renderItem多项支持#13192

我有一个带有文本框/按钮/其他组件的页面RN平面列表,但问题是我无法滚动到平板列表的末尾,还有一些其他部分是溢出的.

 <View>
<TextInput
    value={this.state.code}
    onSubmitEditing={this.getPr}
    style={styles.input}
    placeholder="placeholder"
/>
<Button onPress={this.getPr} title="Cari" color="blue" />
<FlatList
    data={this.props.produk}
    renderItem={({ item }) => (
        <View key={item.id}>
            <Image
                resizeMode="cover"
                source={{ uri: item.thumb }}
                style={styles.fotoProduk}
            />
        </View>
    )}
    keyExtractor={(item, index) => index}
/>
</View>;

我正在尝试使用一个在React native中创建聊天 <Flastlist />

像whatsapp和其他聊天应用程序一样，消息从底部开始。

从我的API获取消息后，我调用

this.myFlatList.scrollToEnd({animated: false});

但是它滚动到中间的某个位置，有时滚动到底部的内容较少，有时却什么也不做。

最初如何滚动到底部？

我的聊天消息具有不同的高度，所以我无法计算高度。

我正在使用React Native的FlatList组件.当用户在Android上使用TalkBack滚动浏览FlatList时,它不会显示"向...显示项目......"

在iOS上,使用画外音滚动会提供反馈(显示y的第x页).

我想知道这是否是反应原生的FlatList的差距？或者我错过了一些设置？

我在我的 React Native 项目中使用 Flatlist 和 SectionList，并且有 300 多行数据。然而，我发现一个严重的问题，就是当我不断向下和向上滚动时，内存使用率越来越高。我怎么解决这个问题？或者我怎样才能释放内存？

我知道这里有一些相关的问题，但我尝试了很多解决方案，但没有一个有效。

举些例子，

1.我使用了Pure.component或者shouldcomponentUpdate

2.我使用了Flatlist和SectionList的一些props

initialNumToRender={9}
windowSize={10}
maxToRenderPerBatch={2}
removeClippedSubviews={true}
disableVirtualization={true}
getItemLayout={this.getItemLayout}
keyExtractor={(item, index) => item[0]}
extraData={this.state}

还有其他解决方案可以帮助我解决问题吗？多谢！

我正在创建一个 androidTV 应用程序并尝试使用 TouchableNativeFeedback 获取当前以 FlatList 为重点的项目。

当 FlatList 项目具有焦点时，我尝试使用“onFocus”来更改状态，但是当应用程序呈现时，它似乎专注于每个项目，因为它被加载到 FlatList 中，导致许多 SetState 更新出错。我尝试在 onfocus 中使用“()=>”来停止它在渲染时运行，但这似乎完全停止了它的工作

<View style={styles.containerItemNow}>
    <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#f14621', true)} onFocus={this.UpdateStatus(item.status)} onPress={() => this.downloadfile(item.url)}>
        <View style={styles.containerItemNowSelected}>
            <Text style={{color: 'white'}}>{item.title}</Text>
        </View>
    </TouchableNativeFeedback>
</View>

我希望当用户使用 d-pad 移动时，该项目会以涟漪效果突出显示并运行 onfocus 并更新所需的状态，但即使项目涟漪效应显示 onfocus 未运行，也不会发生这种情况

我正在使用React Native 的FlatList来渲染一堆堆叠在一起的项目。

这很好用，我设法使FlatList自身扩展其高度以填充可用空间，但我希望FlatList项目在有更多可用空间时增长。

使用ScrollView（简化伪代码）很容易做到这一点：

<ScrollView
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
>
  <Item key={1} style={{ flexGrow: 1 }} />
  <Item key={2} style={{ flexGrow: 1 }} />
</ScrollView>

但是它不适用于FlatList（简化的伪代码）：

<FlatList
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
  renderItem={({ index }) => <Item key={index} style={{ flexGrow: 1 }} />}
/>

我创建了一个 Expo Snack，展示了ScrollView成功种植元素和FlatList失败的元素。

网上似乎有很多关于使父项FlatList全高的讨论，但我一直在努力寻找有关使FlatList 项目 增长以填充可用FlatList高度的任何内容。

我需要使用，FlatList因为我计划使用react-native-draggable-flatlist来实现拖放并且找不到不使用 …