标签: react-native-flatlist

为什么我们在flatlist中使用getItemLayout,它如何帮助提高flatlist的性能.检查react-native文档,但没有找到令人满意的答案.

  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

什么是抵消在这里,它做什么？

当我在TextInput中输入内容时,我第一次触摸FlatList项目之一.应该是console.log('item press'),但事实并非如此.只有第二次触摸它控制台.有人知道原因吗？

这是我的代码.

<TextInput
    placeholder='test'
    value={this.state.inputText}
    onChangeText={(inputText) => this.setState({inputText})}
    style={{
        marginBottom: 20, 
        fontSize: 17, 
        width: 300, 
        textAlign: 'center''
    }}
/>
<FlatList
    data={[{key: 'item 1'}, {key: 'item 2'}]}
    renderItem={({item}) =>
        <TouchableHighlight 
            onPress={() => console.log('item press')}
            underlayColor='#dddddd'
        >
            <View style={{height: 40}}>
                <Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text>
            </View>
        </TouchableHighlight>
    }
/>

嗨,我正在开发基于FlatList的示例应用程序,这是我的代码.实际上我显示了整个记录,比如我有50条记录到我的账户.但现在我显示了整整50条记录.Bur我需要在添加10条记录后显示10.但我不知道添加到FlatList.

这是我的代码:

<FlatList
                    data={this.state.profiles}
                    renderItem={({ item, index }) => this.renderCard(item, index)}
                    keyExtractor={item => item.id}
                    ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
                />


renderCard (profile, index) {
    console.log('rendercard', profile);
    //
    return (
        <View key={profile.id}>
            <ProfileCard
                profile={profile}
                style={styles.card}
                onPress={() => this.props.screenProps.rootNavigation.navigate('Profile', { profile: this.state.profile, id: profile.id })}
                // onPress={() => alert('PROFILE')}
                onAddClick={() => this.setState({ connectionPageVisible: true, cardProfile: profile })}
                connectedIds={(this.props.screenProps && this.props.screenProps.connectedIds) || this.props.connectedIds}
            />
        </View>
    );
}

请告诉我使用活动指标加载更多记录.提前致谢

当 TextInput 被聚焦并且用户滚动直到输入离开可见框架时，输入变得模糊并且键盘消失。我该如何解决？

我在 Android 模拟器中运行代码。在 iOS 上不会出现此问题。如果您尝试点击 FlatList 底部的 TextInput，则键盘会立即关闭，这可能是因为 Input 在打开后位于键盘下方。任何线索将不胜感激

这是要重现的代码

import React from 'react';
import { TextInput, FlatList } from 'react-native';

export default class App extends React.Component {
    render() {
        return (

        <FlatList

            data={["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t"]}
            keyExtractor={item => item}
            renderItem={({item}) => (
                <TextInput placeholder="0.0"
                    keyboardType='decimal-pad'

                    onFocus={() => {void(0)}}
                />
            )}
        />  
        );
    }
}

Input 应该保持焦点并且用户应该能够输入文本，即使 Input 不可见。这使得整个应用程序无法在 Android …

我的反应本机应用程序中有此类别过滤器组件。第一次加载该组件时，它不会滚动到给定的索引项（即 3）。我检查了一下，该函数scrollToIndex正在调用。但是加载屏幕后，当组件重新渲染时它就可以工作了。

为什么它在第一次加载屏幕时不向下滚动？

import React, { useCallback, useRef } from 'react'
import { StyleSheet, TouchableOpacity, FlatList, View } from 'react-native'
import { Badge, Text } from 'native-base'
import { connect } from 'react-redux'
import * as categoryActions from '../../Redux/Actions/categoryActions'
import { useFocusEffect } from '@react-navigation/native'

const CategoryFilter = (props) => {
  const flatlistRef = useRef()

  const handleSetSelectedCategoryId = (categoryId) => {
    props.setSelectedCategoryId(categoryId)
  }

  const getItemLayout = (data, index) => ({
    length: 50,
    offset: 50 * index,
    index,
  }) …

爱马仕已启用

操作系统：iOS

使用 FlatList 和 ScrollView

开发ScrollView或FlatList时，滚动条没有问题。在生产中，有时它看起来很丑并且位于屏幕中间，有时与右侧（应该在的位置）有巨大/小的偏移，有时甚至位于左侧。这是我得到的图像：

先谢谢各位小伙伴了！

我正在使用FlatList每行可以具有不同高度的位置(并且可以包含来自远程服务器的文本和零个或多个图像的混合).

我无法使用,getItemLayout因为我不知道每行的高度(也不是前面的那些)能够计算出来.

我面临的问题是我无法滚动到列表的末尾(当我尝试时它跳回几行)并且我在尝试使用时遇到问题scrollToIndex(我猜是因为我错过了这个事实getItemLayout).

我写了一个示例项目来演示这个问题:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, FlatList } from 'react-native';
import autobind from 'autobind-decorator';

const items = count => [...Array(count)].map((v, i) => ({
    key: i,
    index: i,
    image: 'https://dummyimage.com/600x' + (((i % 4) + 1) * 50) + '/000/fff',
}));

class RemoteImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            style: { flex: 1, height: 0 },
        };
    } …

反应原生： v0.52.0

平台： iOS

我的FlatList代码：

<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}

  legacyImplementation={false}

  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}

  ItemSeparatorComponent={this.itemSeparatorComponent}
/>

项目分隔符代码：

itemSeparatorComponent = () => {
    return <View style = {
        {
            height: '100%',
            width: 5,
            backgroundColor: 'red',
        }
    }
    />
}

最后是FlatList项目组件：

renderPhoto = ({ item, index }) => {
    return (
        <View style = {{ width: SCREEN_WIDTH, height: 'auto' }}>
          <FastImage 
            style = { styles.photo }
            resizeMode = { FastImage.resizeMode.contain }
            source = {{ uri: …

什么是在反应原生中在Flatlist中应用延迟加载的最佳方法.目前在平面列表中有无限滚动.我是React原生的新手,所以我什么都不知道.

我在 ReactNative 中有一个 FlatList，它从 API 中提取文章列表。当滚动到达列表末尾时，会从 API 中拉出另一页文章，并将其附加到 Redux reducer 中的文章列表。

FlatList 设置为：

render() {
    return(
    <FlatList data={this.props.articles.articles} // The initial articles list via Redux state
        renderItem={this.renderArticleListItem} // Just renders the list item.
        onEndReached={this.pageArticles.bind(this)} // Simply calls a Redux Action Creator/API
        onEndReachedThreshold={0}
        keyExtractor={item => item.id.toString()}/>
   )};

Redux 的“文章”状态对象使用 React Redux 连接函数映射到组件。相关的减速器（为简洁起见删除了一些项目）看起来像：

/// Initial 'articles' state object
const INITIAL_STATE = {
    articles: [],
    loading: false,
    error: '',
    pageIndex: 0,
    pageSize: 10
};

export default(state = INITIAL_STATE, action) => {
switch(action.type){
    // …