标签: react-native-flatlist

我目前正在尝试使用该FlatList组件实现一种形式的 LazyLoading ，它引入了一个名为的简洁小功能onViewableItemsChanged，它为您提供了所有不再出现在屏幕上的组件以及现在出现在屏幕上的项目的列表。

这是一个自定义的 LazyLoad 实现，因此比大多数可用的 LazyLoad 开源库更复杂，这就是我正在研究自己的实现的原因。我已经调查过react-native-lazy-load和其他人了。

基本上，我需要能够调用一个函数，该函数是在 FlatList 中呈现的组件的一部分，我尝试创建对 FlatList 中呈现的项目的引用并这样调用它，但它似乎不起作用.

例如：

<FlatList data={...}
    renderItem={(item) => <Example ref={(ref) => this[`swiperRef_${item.key}`] = ref}}
    onViewableItemsChanged={this.onViewableItemsChanged}
/>

onViewableItemsChanged = ({viewableItems}) => {
    viewableItems.forEach((item) => {
        const { isViewable, key } = item;
        if(isViewable && !this.cachedKeys.includes(key)) {
            const ref = this[`swiperRef_${key}`];
            if(!ref) return console.error('Ref not found');
            ref.startLoading();
            this.cachedKeys.push(key);
        }
    });
}

现在在<Example />组件中，我将调用一个函数startLoading，当一个新的可见项出现在屏幕上时应该调用该函数，但是 ref 永远不存在。

我想做一个动画标题。

1. 我创建了一个 FlatList 的动画组件，
2. 使用该onScroll函数更新动画值。
3. 使用绝对位置放置一个视图 (Animated.View) 作为动画 FlatList 上方的标题。
4. 最后，使用变换属性插入动画值以更改视图 (Animated.View)。

动画效果很好，但动画一点也不流畅。

我看到了使用如何scrollEventThrottle帮助平滑度的问题。所以我认为使用 FlatList 会很顺利，但事实并非如此。如果您在按下时滚动，则很流畅。但是如果你滚动并离开手指，它会很紧张（我不知道如何描述它。抱歉）。滚动很流畅，但动画视图（标题）动画一点也不流畅。

环境

• 反应：16.0.0-alpha.12，
• 反应原生：^0.47.0，
• 节点：v7.7.3
• npm：4.1.2
• 纱线：0.21.3

目标平台： iOS 和 Android

构建工具： expo

链接到小吃演示

export default class AnimatedHeader extends React.Component {
	state = {
		animatedValue: new Animated.Value(0),
	};
	
	_renderItem = ({item}) => {
		return (
			<View style={styles.nonsenseItem}>
				<Text style={styles.itemText}>{item}</Text>
			</View>
		)
	};
	
	render() {
		let scaleY = this.state.animatedValue.interpolate({
			inputRange: [0, 180],
			outputRange: [1, 0.5],
			extrapolate: 'clamp',
		});
		
		let translateY …

我有一个包含大量内容的平面列表，当我在调试器控制台上滚动10到15页后向下滚动时，我得到了以下信息：

VirtualizedList：您有一个更新缓慢的大列表-确保您的renderItem函数呈现遵循React性能最佳实践的组件，例如PureComponent，shouldComponentUpdate等。{dt：582，prevDt：1651，contentLength：15187.5}

仅供参考：我尝试过使用PureComponent和更多方式，但没有人帮忙，我在控制台中得到了相同的输出。

为什么我得到这个，如何解决呢？

这是我的代码：

<FlatList
    data={outfits}
    keyExtractor={(item, index) => index}
    numColumns={2}
    initialNumToRender={5}
    getItemLayout={(outfits, index) => (
       { length: 50, offset: 50 * index, index }
    )}
    extraData={this.state.extraData}
    renderItem={({item,index}) => <Items item={item} index={index}/>}
    onRefresh={this.handleRefresh}
    refreshing={this.state.refreshing}
    onEndReached={this.handleLoadMore}
    onEndReachedThreshold={20}
    ListFooterComponent={this.renderFooter}
/>

我正在尝试呈现此图像中的项目列表。

每行中的项目将根据其文本大小而有所不同。Flatlist用于渲染项目。

标签视图.js

<View style={styles.tagView}>
    <FlatList 
        scrollEventThrottle={1900} 
        data={this.state.interests} 
        numColumns={5}
        renderItem={({ item }) => (
           <View style={styles.tag}>
               <Text>{item.tagName}</Text>
           </View>
        )}
        keyExtractor={(item, index) => index}
        contentContainerStyle={{ paddingBottom: 100 }}
    />
</View>

风格

tagView: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap"
},
tag: {
    borderWidth: 1,
    borderRadius: 10,
    borderColor: "black",
    backgroundColor: "white",
    padding: 3,
    marginTop: 5
}

结果

但是这里的项目没有用设备宽度包装。有没有包装内容？

我正在尝试使用使用 Flatlist 的react-native-snap-carousel呈现大量项目。

我的问题是，如果它的索引是 100，我如何立即呈现该项目？如果我下面的代码的 firstItem 索引更高，则性能会很慢。考虑到我已经有了需要渲染的数据。

<Carousel
        data={this.state.data}
        renderItem={this._renderItem}
        itemWidth={WINDOW_WIDTH}
        sliderWidth={WINDOW_WIDTH}
        removeClippedSubviews={true}
        initialNumToRender={this.state.initialIndex + 1}
        maxToRenderPerBatch={3}
        firstItem={this.state.initialIndex}
      />

我已经构建了一个应用程序（您可以在下面看到它的屏幕截图）：

起初，我的问题是，当我专注于搜索输入时，键盘会出现，但我只能通过触摸 Flatlist 而不是搜索输入周围的区域来关闭键盘。所以我添加了以下代码：

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);

....并且将 render() 的整个 XJS 内容包装在里面<DismissKeyboard>，这样做我完全解决了关闭键盘的问题（我的意思是在此之后我现在可以通过触摸此页面视图的任何位置来关闭键盘） ，但在我遇到另一个问题之后。当前问题可以通过以下步骤重现：

• 我刚刚渲染了页面，一切看起来都很好很酷（只是开始）

• 我可以轻松流畅地滚动平面列表

• 由于我们第一次渲染它专注于搜索输入，键盘出现了，所以为了完全看到它后面的Flatlist，应该关闭键盘......

• 所以我通过触摸页面中的其他地方来失去焦点

• 成功关闭键盘

• 但现在我无法顺利滚动 Flatlist

• 但是如果我再次专注于搜索输入，我将能够毫无问题地滚动 Flatlist

****注意**** 如果我通过单击手机的后退按钮关闭键盘，我不会遇到这个问题，但在现实世界中，考虑到用户体验，用户期望通过在某处outFocusing（关闭键盘） ) 应该能够毫无问题地滚动 Flatlist。

我试过的：

• 将 Flatlist 包裹在里面ScrollView==> // 没有变化：/

• 将 {{ flex: 1 }} 的样式赋予 Flatlist ==> // 无变化 :/

如果您以任何方式帮助我，将不胜感激

我正在构建一个聊天应用程序，从React-Native版本开始0.63，当Android上的倒置 Flatlist 中涉及长文本时，我的性能很差。

这是展示该问题的小吃再现（仅在尝试使用物理 Android 手机时可见）。

我为它报告了一个错误。对于正在使用倒置 Flatlist 构建聊天应用程序的任何人来说，这应该是相当公然的，但不知何故，我没有看到任何地方都在谈论这个问题。

这让我觉得也许其他人已经以某种方式解决了它？如果是，我该如何解决？它使我的应用程序现在几乎无法使用。

我有一个带有两列的平面列表，用于呈现卡片组件。一旦用户点击一张卡片，它就会通过 React Native 的 Animated API 弹出。

我将单击组件的 ZIndex 值更改为 10。当它关闭时，该值设置为 0。

问题是这个逻辑只适用于行元素，而不适用于行之间。因此，位于较低索引行中的所有其他卡片都位于其他卡片之后。

我应该怎么做这个问题？先感谢您。

这是示例；

我正在使用名为 selectedStream 的状态设置我的 flatlist 组件显示的数据。每次用户按下不同的组选项时，selectedStream 都会发生变化。我注意到平面列表需要 1-3 秒才能刷新当前已显示的所有帖子。我希望有一个加载指示器，以便当指示器消失时，列表已经正确显示新更新的数据。

        <FlatList   
                    maxToRenderPerBatch={5}
                    bounces={false}
                    windowSize={5}
                    ref={feedRef}   
                    data={selectedStream}/> 

我在 Android FlatList 上遇到问题。如果标头中有一个向下延伸的元素（在我的例子中，标头底部有一个下拉菜单），它总是在 Android 上的 flatList 项目下呈现。我可以将 contentContainerStyle zIndex 设置为 99 之类的值，这解决了 iOS 上的问题，但 Android 仍然在列表项下呈现标题。

如果在渲染 flatList 后更改 zIndex，则该问题会以某种方式得到解决，但这会引入另一个问题。当我向下滚动列表时，应用程序严重崩溃。这是展示这个问题的世博会小吃。

最初，zIndex 设置为某个大值，按下 Change ZINDEX 按钮只需将其增加 1。这修复了 zIndex 问题，但一旦您开始滚动列表，应用程序就会崩溃。

https://snack.expo.dev/GalYuThms?platform=android

知道如何解决这个问题吗？

谢谢。