我有一个 10x10 矩阵，我想将其渲染在平面列表中。我如何启用垂直和水平滚动，以便用户可以从 10X10 矩阵中选择他们选择的项目。我只希望我的平面列表能够以两种方式滚动。

我有一个平面列表，它呈现从数据库获取的数据，所以我确保项目按类型排序。

现在我想在每个部分的顶部渲染一个文本，以区分每个部分，标题类型（例如：专业：然后是专业的部分，医生：然后是医生的部分）\n这里是看看我的代码：

<FlatList\n            data={this.state.data.sort((a, b) => a.type === \'sp\xc3\xa9cialit\xc3\xa9\' ? -1 : 1)}\n            keyExtractor={item => { return item.id }}\n            renderItem={({ item }) => \n              <TouchableOpacity onPress={() =>NavigationService.navigate(\'O\xc3\xb9 ?\',{lien: item.lien, choix: c}) }> \n              {item.type == \'sp\xc3\xa9cialit\xc3\xa9\' && (\n                \n                <Highlighter\n                  highlightStyle={{ backgroundColor: \'#FFC617\' }}\n                  searchWords={[this.searchedText]}\n                  textToHighlight={item.name}\n                  style={{paddingLeft:10,color: \'#2c3e50\',height:42,backgroundColor: \'white\'}}\n                />\n                \n              )}\n              {item.type == \'Tag\' && (\n                <Highlighter\n                highlightStyle={{ backgroundColor: \'#FFC617\' }}\n                searchWords={[this.searchedText]}\n                textToHighlight={item.name}\n                style={{paddingLeft:10,color: \'#2c3e50\',height:42,backgroundColor: \'white\'}}\n              />\n                \n              )}\n              {item.type == \'M\xc3\xa9decin\' && (\n                <View style={{ …

我的屏幕布局位于SectionLista 内，View并且onEndReached我正在调用 API 来成功获取分页数据（LoadMore 行为）。

由于SectionList只覆盖了屏幕的 40%，我尝试添加，ScrollView以便整个屏幕变得可滚动。

问题：当屏幕加载时，它会获取初始分页数据。渲染 UI 后，onEndReached事件被触发，进而调用 api 来再次加载更多数据。这会循环运行，直到获取完整的数据。

有没有人遇到同样的问题。任何解决方案如何阻止它。

我有一个自定义组件，RefreshControl这样我就可以更改title propertyRefreshControl 提供的内容。

最后这是我的自定义RefreshControl组件的返回：

const [counter, setCounter] = useState(0)
    useEffect(() => {
        if (!refreshing && counter > 0) {
            setTimeout(() => {
                setCounter(previousValue => previousValue + 1)
            }, 500)
        }

        !refreshing && counter === 0 && setCounter(previousValue => previousValue + 1)
    }, [refreshing])

    return (
            <RefreshControl
                onRefresh={onRefresh}
                refreshing={refreshing}
                title={counter > 1 ? 'Refreshing': 'Loading data'}
                tintColor={Colors.main}
                titleColor={Colors.main}
            />
        )

我的这个组件的用途如下FlatList：

<FlatList
     ref={flatListRef}
     style={styles.flatList}
     contentContainerStyle={styles.contentContainer}
     showsVerticalScrollIndicator={false}
     data={data}
     renderItem={renderItem}
     keyExtractor={item => item.number.toString()}
     refreshControl={
         <MyRefreshControl …

我正在尝试使用FlatList以网格格式向用户显示一堆用户头像，但最终看起来非常奇怪，我似乎无法弄清楚该如何解决。

这是它的样子

这是我的FlatList代码的样子：

<FlatList
style={{flex: 1}}
data={this.props.usersList}
horizontal={false}
numColumns={3}
columnWrapperStyle={{ marginTop: 10 }}
renderItem={({ item }) => this.renderItem(item)}
keyExtractor={this._keyExtractor}/>

这是renderItem的组件外观：

class UserButton extends React.Component {
render() {
    const { item, onPress } = this.props;
    return (
        <TouchableOpacity style={styles.button} onPress={onPress}>
            <Image
                source={(item.avatar) ? { uri: item.avatar } : require('../assets/images/userplaceholder.png')}
                resizeMode='cover'
                style={styles.imageStyle}
            />
        </TouchableOpacity>
    )
}

const styles = {
    button: {
        height: 100,
        width: 100,
        borderColor: '#aaa',
        backgroundColor: '#aaa',
        borderWidth: 2, 
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 5,
    },
    imageStyle: …

我已经尝试过flatlist但它在android中有一些性能问题.

1. 当我向下滚动时,它会加载列表.但之后,它向上滚动时显示空白.

2. 到达屏幕的末尾后,它会停止一段时间,然后加载数据.为什么不在底部显示加载器(活动指示器)？为什么onEndReached和onEndReachedThreshold不起作用？

Plz在这里看一下视频

https://youtu.be/5tkkEAUEAHM

我的代码:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import { List, ListItem, SearchBar } from "react-native-elements";

export default class FlatListExample extends Component
{
constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = …

我正在使用FlatList和一个结果ListHeaderComponent作为我的屏幕的根组件.我不希望它的顶部在滚动上反弹,但我想保持底部弹跳以用于UX'n'feel目的,因为FlatList支持无限滚动.任何想法怎么样？

我正在使用FlatList,以便Store在我的react-native应用程序中实现View.

我正在从我在组件的componentDidMount循环步骤中完成的API调用中检索商店项目,然后将其存储在我的本地state.

我在Flatlist文档中找到了这句话:

当内容滚出渲染窗口时,不会保留内部状态.确保在项目数据或外部存储(如Flux,Redux或Relay)中捕获所有数据.

我想知道这意味着什么.我只是使用我的本地状态,它似乎工作得很好.这样做有什么问题吗？你能否就这一点向我提供更多信息？

此外,如果您对我的用例有任何建议或优化,请随意添加它们.

谢谢你的时间.

如何使用React Native的FlatList (非无限)进行更多加载

我已经做到了这一点,但不幸的是它无限加载.

这是我的代码片段

<FlatList
    data={this.props.data}
    renderItem={({ item, separators }) => (
        <TouchableHighlight
            onPress={() => this._onPress(item)}
            onShowUnderlay={separators.highlight}
            onHideUnderlay={separators.unhighlight}
        >
            <Text> {item.title} </Text>
        </TouchableHighlight>
    )}
    keyExtractor={item => item.id}
    ListFooterComponent={this.renderFooter}
    onEndReached={this.props.handleLoadMore}
    onEndThreshold={0}
/>

而我的handleLoadMore

handleLoadMore = () => {
    console.log("test"); // <---- this line run infinitely
    fetch(url, {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify(filters)
    })
        .then(response => response.json())
        .then(responseJson => {
            this.setState({
                itemData: [
                    ...this.state.itemData,
                    ...responseJson.estate_list
                ],
                itemPage: this.state.itemPage + 1
            });
        })
        .catch(error => …

我的组件中有一个函数作为道具，并且必须将此函数道具传递给FlastList中renderItem中的另一个组件。怎么做？这是我的代码。

import React, { Component } from 'react';
import { View } from 'native-base';
import PropTypes from 'prop-types';
import { FlatList } from 'react-native';
import AddPlayers from '../AddPlayers/AddPlayers';
import League from '../League/League';
export default class InviteLeagues extends Component {
  static propTypes = {
    invitedLeagues: PropTypes.Array,
    label: PropTypes.string.isRequired,
    InvitedLeaguesList: PropTypes.Array,
    onPress: PropTypes.func.isRequired
  };

  static defaultProps = {
    InvitedLeaguesList: [
      { name: 'Howdy', createdBy: 'email1@gamil.com', status: 'Join' },
      { name: 'Lorem', createdBy: 'email@gmail.com', status: 'Join' }
    ]
  };

  renderLeague(item) {
    return <League …