我正在寻找一种在这样的表格上滚动视口的方法，除了每个单元格的大小完全相同：

我目前正在使用FlatList'snumColumns参数来制作表格并在该表格上滚动视口。

这是一个小吃示例 - RegularGridExample：

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

const numRows = 10,
  numColumns = 10,
  width = 100,
  height = 100,
  cells = [...Array(numRows * numColumns)].map((_, cellIndex) => {
    const rowIndex = Math.floor(cellIndex / numRows),
      colIndex = cellIndex % numColumns;
    return {
      key: `${colIndex},${rowIndex}`,
      rowIndex,
      colIndex,
      styles: {
        width,
        height,
        backgroundColor: 'green',
        borderColor: 'black',
        borderWidth: 1,
      },
    };
  });

export default class RegularGridExample extends React.Component { …

大家好，我正在从 json api 获取数据，我正在使用 flatlist 来呈现项目。我正在使用numColumns属性每行显示 3 个项目，但假设我有 7 或 8 个项目，但在渲染时遇到问题。我想显示的布局是这样的

X X X
X X X
X X

但我得到的是： 布局

这是我的代码：

    _renderItem = ({ item, index }) => (
            <View style={categorystyles.Category} key={index}>
                <TouchableOpacity activeOpacity={.5}
                    onPress={() => this.props.navigation.navigate('ListingPerCategory', { catid: item.id })}>
                    {item.category_app_icon ? <Image style={categorystyles.CategoryImg}
                        source={{ uri: `${item.category_app_icon}` }} /> :
                        <Image style={categorystyles.CategoryImg}
                            source={require('../assets/coffeecup.png')} />}
                </TouchableOpacity>
                <Text style={{ marginTop: 5 }}>{escape(item.name).replace('%20', ' ').replace('%26amp%3B%20', ' ')}</Text>
            </View>
        )
   render(){
     return(
        <FlatList
        horizontal={false}
        data={this.state.categories}
        keyExtractor={(item, index) => item.id} …

我有一个 flatList 视图，我希望它在数据更新时滚动到结束或滚动到索引（从服务器获取数据），我在 comoponentDidUpdate 中执行但它不起作用。现在当渲染完成时，listView 总是滚动到顶部而且我看不到最新加载的数据。所以有没有办法在渲染完成时捕获事件。

代码：

...
fetchData(){
    fetch(url)
    .then((res)=>{
        this.setData({data:[...this.state.data, res.data]})
    })
}
componentDidUpdate(){
    this.refs.listView.scrollToEnd({animated:true})
}
render(){
    return <FlatList ref='listView' data={this.state.data} onEndReached={()=>this.fetchData()}.../>
}

目前，我在使用 FlatList 时遇到了问题。我有一个组件来呈现列表簿。按照设计，header 的宽度是屏幕的宽度，body 将左右填充 10px。

所以我使用了contentContainerStyle={{paddingHorizontal: 10}}. 但是结果是header和body都是10px左右填充。

请提出解决方法。对不起，我的英语不好！！

更新：我很抱歉没有彻底描述我的问题。

在 main.tsx

...
public render() {
  return (
    <FlatList
      key...
      data={..}
      renderItem={this.renderItems}
      ListHeaderComponent={this.renderHeader}
      contentContainerStyle={styles.contentStyle}
    />
  );
}

private renderHeader = () => {
  return (
    <View style={style.header}
      //TODO something ...
    </View>
  );
}

private renderItems: ListRenderItem<IBook> = ({ item: {bookId} }) => bookId ?
  (
    <BookGridCell
      title={...}
      image={...}
      //TODO more..
    />
  ) : <View style={styles.emptyBox} /> 
}

在renderItems，我调用了一个组件BookGridCell。在这个组件中，设置了书籍的设计。所以如果我直接在里面添加样式renderItems，每本书的左右边距都是10px，而不是整个正文。

contentContainerStyle 与 …

我有一个水平滚动的 React-Native FlatList，我通过将“horizo​​ntal” prop 设置为 true 来实现它，它工作得很好，但现在我想添加 pull 来刷新，但我无法让它工作。

我添加了“refresing”和“onRefresh”道具，它们可以正常工作。唯一的问题是 FlatList 实现了垂直下拉刷新，这在水平滚动时非常奇怪。在 Android 和 iOS 中，您必须从顶部下拉才能开始刷新，但这没有意义，因为当您位于列表末尾时，您想从左侧拉。在 iOS 上，情况也更糟，因为 FlatList 的整个内部现在也可以垂直移动。

是否有任何设置可以尝试使其正常工作，或者我可以通过任何方式手动实现水平拉动以刷新？

我有一个带有一些元素的 FlatList，其中顶部元素应该与底部元素重叠。为此，我想反转 zIndex，但 FlatList 不断覆盖我的 zIndex。

在下面的代码中，我试图用 zIndex 反转，zIndex: 0 - index但它不起作用

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={[styles.item, { zIndex: 0 - index, }]} />;
  }
  render() {
    return <FlatList data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost} />;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  }, …

我正在尝试做的事情：

制作一个搜索栏并将结果显示在栏下方的平面列表中。

我拥有的：

我有一个 SearchBar 和一个 FlatList，FlatList 需要但在绝对位置，所以它覆盖了搜索栏底部的内容

问题：

当 FlatList 处于活动状态时，它会覆盖搜索栏，我无法滚动列表或选择一个项目。我注意到，如果我在单击 SearchBar 应该出现的位置时尝试选择一个项目或滚动列表，我可以选择并滚动列表。

我需要的：

要在 SearchBar 下显示并能够滚动它的 FlatList。我可以用来top: 50在 SearchBar 下显示 FlatList 但它看起来并不好

观察：我不太擅长风格

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableHighlight, FlatList } from 'react-native'
import {
    Slider,
    SearchBar,
    ListItem,
} from 'react-native-elements'

export default class SearchForm extends Component {

    state = {
        pages: 1,
        displayList: false,
        itemsPerPage: 5,
    }

    componentDidMount = async () => {
        const {
            data = …

正如我们可以在 when 使用 load more 功能onEndReached一样，同样的，当我们到达列表顶部时我们如何使用 load more ？同样在执行此操作时，当我在顶部加载更多数据时，平面列表移动到最顶部元素，因此滚动变得无限。

谢谢。

我正在编写一个自定义钩子以将它与realm-js一起使用。

export default function useRealmResultsHook<T>(query, args): Array<T> {
  const [data, setData] = useState([]);

  useEffect(
    () => {
      function handleChange(newData: Array<T>) {
        // This does not update FlatList, but setData([...newData]) does
        setData(newData);
      }

      const dataQuery = args ? query(...args) : query();
      dataQuery.addListener(handleChange);
      return () => {
        dataQuery.removeAllListeners();
      };
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [query, ...args]
  );

  return data;
}

在我的组件中：

const MyComponent = (props: Props) => {
  const data = useRealmResultsHook(getDataByType, [props.type]);

  return (
    <View>
      <Text>{data.length}</Text>
      <FlatList
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderItem} …

我正在尝试为draggable-flatlist 编写一个简单的代码。同样的代码对于 FlatList 运行得非常好。在下面的代码中，如果我用 DraggableFlatList 替换 FlatList，虽然从呈现的组件“TaskListTile”显示日志，但我没有在屏幕上看到任何内容

  this.state = {
    data: [{key: '0',id:'0', name: 'Tasklist1', totalTasks: '10', completedTasks: '9'},
    {key: '1',id:'1', name: 'Tasklist2', totalTasks: '12', completedTasks: '9'},
    {key: '2',id:'2', name: 'Tasklist3', totalTasks: '50', completedTasks: '1'}
  ]

  }
}


render(){
  return (

    <FlatList
      data={this.state.data}
      renderItem= {({item}) =><TaskListTile displayData={item}/>}
      keyExtractor={item => item.id}
      scrollPercent={5}
      onMoveEnd={({ data }) => this.setState({ data })}
    /> 
  )
};

任务列表Tile.js

    const {id, name, completedTasks, totalTasks} = this.props.displayData;

    return (
        <View key={id} style={{backgroundColor:'#d6eef8', borderColor:'#00CCFF', borderWidth:1,margin:10,padding:10, borderRadius:5}}>
            <Text style={{color:'#00CCFF', fontSize:20}}>{name}</Text> …