标签: react-native-flatlist

我有一个带有文本框/按钮/其他组件的页面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的FlatList组件.当用户在Android上使用TalkBack滚动浏览FlatList时,它不会显示"向...显示项目......"

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

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

我正在尝试加载此 FlatList，但它没有在屏幕上显示任何内容，也没有出现错误。品种 console.log 正在记录一个键为 $t 的对象数组。

import React, { Component } from 'react';
import { FlatList, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { Container, Content } from 'native-base';
// import BreedListItem from './BreedListItem';

class BreedList extends Component {
    render() {
        console.log(this.props.breeds.breed);
        return (
            <Container>
                <Content>
                    <FlatList 
                    style={{ flex: 1 }}
                    dataSource={this.props.breeds.breed}
                    renderItem={(breed) => {
                        console.log(breed.$t);
                        return (
                        <View><Text>{breed.$t}</Text></View>
                    );
                }
                }
                    keyExtractor={(breed) => `${breed.$t}`}
                    />
                </Content>
            </Container>
        );
    }
}

const mapStateToProps = (state) …

我的 FlatList 是无状态组件，当按下项目时，我想通过调用方法“handleOnPress”来处理 onPress。我该怎么做 ？？以下是示例代码。
`

handleOnPress = () => {
  .....
}
<SampleListView
    data={prop.data}
    onPress={this.handleOnPress}
/>
const SampleListView = (props: Props) => {
  return (
    <FlatList
        style={styles.container}
        data={props.data}
        keyExtractor={item => item.id.toString()}
        renderItem={renderItem}
    />
    )
}
renderItem = ({ item }: { item: DataSample }) => {
  return (
  <TouchableWithoutFeedback onPress={ () => props.onPress}>
      ....
  </TouchableWithoutFeedback>
  )
}

`

现在我想像 Facebook 的应用程序一样创建一个显示在我的 tabNavigator 上方的栏。此选项卡在向下滚动时隐藏并在向上滚动时显示。现在我正在使用 FlatList，但 FlatList 组件具有 ListHeaderComponent 选项，用于呈现他的标题，向下滚动时也会隐藏。（因为它在顶部，所以需要滚动到开始才能看到它，对我很长的列表项不友好）

请帮助我任何想法。

我的代码适用于正常捕捉，但当快速捕捉时。它滚动多行。需要一个解决方案类似于 ios 原生 isPagingEnabled 标志或像 TikTok 应用视频滚动的东西。

这是我的代码

import React, { Component } from 'react';
import { View, FlatList, Text, Dimensions, StyleSheet, StatusBar } from 'react-native';


export default class Videos extends Component {

    static navigationOptions = ({ navigation, navigationOptions }) => {
        return {
            header: null
        };
     };

    constructor(){
        super();
        this.colorData = [
            'rgb(255,140,140)',
            'rgb(253,244,128)',
            'rgb(5,217,200)'
        ]
    }

    render() {
        return (
            <View>
                <StatusBar translucent={true} backgroundColor={'transparent'} />
                    <FlatList

                        horizontal={false}
                        decelerationRate={0}
                        snapToAlignment={"center"}
                        snapToInterval={Dimensions.get('screen').height}

                        data={this.colorData}
                        keyExtractor={(item, index) => `id_${index}`}
                        style={styles.fullScreen}
                        renderItem={({ item …

我面临着 React Native 中似乎长期存在的问题。
我正在使用带有 RN 版本 0.59 的 Expo SDK35。由于代码库较大，我尚未更新到 Expo SDK36 / RN 0.60，但如果这可以弥补我的问题的解决方案，我可以更新。

我有一个Animated.View有FlatList子组件的组件，并且我无法使用scrollToIndex()FlatList 引用上应该提供的静态方法（特别是）。请参阅下一个示例代码：

class Example extends React.Component{
    constructor(props){
        super(props);
        this.myRef = null;
    }

    componentDidUpdate = () => {
        /*
            somewhere in code outside this class, a re-render triggers
            and passes new props to this class.
            I do have props change detection, and some more other code,
            but I have removed it in order to minimize the code example here …

我已经平面列表水平设置 与从阵列来的11项数据，这是固定的，不会改变

我想要的是当用户在滚动时到达平面列表的末尾时，数据应该保持不变，但第一个项目应该显示在最后一个，然后依此类推

这是我迄今为止尝试过的

  <FlatList
        {...this.props}
        ref={ref => {
          this.infListRef = ref;
        }}
        data={this.props.data}
        onScrollEndDrag={this.handleScroll}
        initialScrollIndex={0}
        scrollEventThrottle={16}
        renderItem={this.props.renderItem}
        onScroll={({nativeEvent}) => this.checkScroll(nativeEvent)}
        horizontal
        showsHorizontalScrollIndicator={false}
        keyExtractor={item => item.id}
      />

任何帮助将不胜感激。

我正在构建一个聊天应用程序，使用倒置的Flatlist. 我在onEndReached调用时将新项目添加到列表顶部，并且一切正常。

问题是，如果将项目添加到底部，它会立即滚动到列表底部。这意味着用户必须向上滚动才能阅读刚刚添加的消息（这很糟糕）。

我试图调用scrollToOffsetin onContentSizeChange，但这有 1 秒的延迟，滚动来回跳跃。

当我将项目添加到顶部和底部时，如何通过在屏幕上保留相同的消息而不是显示新消息来使列表行为相同？

FlatListlistview带有在到达末尾时从 API 获取下一组数据的选项，我们还可以使用该scrollTo函数来保留最后的滚动位置，Flatlist但实现这种方式会在每个下一个分页数据请求上创建重新加载，从而FlatList完成listview加载和我们滚动到最后一个左侧位置。无论如何，如果我们可以实现一个功能，即Flatlist不刷新现有数据，仅将新数据附加到底部而不改变反应本机中的滚动位置，将有助于FlastList以更优化的方式呈现。任何有关建议的帮助将不胜感激。