标签: react-native-flatlist

我有一个 RN (0.44.2) mobx(3.1.10) 应用程序，它使用FlatList. 我基本上遵循https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

当使用我自己的商店时，与示例相反，我必须使用它toJS()才能渲染 FlastList

    // renders list
    <FlatList
      data={this.props.giphyStore.images.toJS()}
      keyExtractor={(_, i) => i}
      renderItem={({ item }) => <Text>found the data</Text>}
    />

    // does not render list
    <FlatList
      data={this.props.giphyStore.images}
      keyExtractor={(_, i) => i}
      renderItem={({ item }) => <Text>did not find the data</Text>}
    />

我真的很难弄清楚为什么toJS()在某些情况下可能需要而不是在其他情况下。

我的商店正在设置可观察的图像，如下所示

async getImageList(query: string) {
  try {
    const requestURL = `${constants.GIPHY_ENDPOINT}${query}`
    const response = await axios.get(requestURL);
    const imgs = response.data.data.map((item) => {
      return { id: …

这是我尝试使用setInterval函数来设置变量content每秒都会更改，我发现可以在滚动时onMomentumScrollEnd获取位置yFlatList

然后我被卡住了，我想event.nativeEvent.contentOffset.y = this.state.content;可以让我的FlatList自动滚动。显然不是。

任何人都可以给我一些建议吗？提前致谢。

我的数据来自 API 这是我的 App.js：

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

const { width, height } = Dimensions.get('window');
const equalWidth = (width / 2 );

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = { movies: [], content: 0 };
  }

  componentWillMount() {
    fetch('https://obscure-reaches-65656.herokuapp.com/api?city=Taipei&theater=Centuryasia')
      .then(response => response.json())
      .then(responseData => {
        console.log(responseData); …

我有一些这样的数据： data = [ {name: 'Christmans', date: '.....'}, {name: 'Easter', date: '.....'}, {name: 'Kwanza', date: '.....'} ...

我想用这样的粘性标题显示数据：

-----[即将推出]------------- 此处置顶部分

• 除夕
• 复活节星期一
• 复活节星期四
• 纳斯卡赛车日

[今天]

• 圣诞节
• 迈克的生日

[本星期]

• 乔希生日
• 地球日
• 第420天

[上星期]

• 母亲节等

这是在react-native中使用FlatList。如何获得按该顺序格式化的数据？我是否需要创建 4 个不同的平面列表，并在第一个列表中传递即将到来的数据，在第二个列表中传递今天的数据，等等？很高兴看到一个例子。谢谢你！

我在 react-native-android 中创建了一个 2 列的 FLatlist

1    |    2
------------
3    |    4

我要这个

2    |    1
4    |    3

我尝试这些：

<View style={{flex:1,flexDirection:'row-reverse'}}>
        <FlatList
            style={{flex:1,flexDirection:'row-reverse'}}

在渲染项目我使用flexDirection:'row-reverse'过

但没有成功！

我正在尝试进行 Instagram 克隆，但是在使用 FlatList 时出现此错误：

错误：类型错误：未定义不是对象（正在评估“_ref.item”）

我在 youtube 上遵循了本教程，我的代码与视频中的代码基本相同，我相信可能由于视频是 1 年前上传的，文档已更改。

使用 React Native Cli 和 android studio

import React, {Component} from "react";
import {FlatList} from "react-native";
import Post from "../presentation";

class PostFeed extends Component{

  _renderPost({ item }) {
    return <Post />;
  }

  _returnKey(item) {
    return item.toString();
  }

  render() {
    return (
      <FlatList
      data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
      keyExtractor={this._returnKey}
      renderItem={this._renderPost()}
    />
    );
  }
}

export default PostFeed;

这是 InstaClone.js

import React, {Component} from "react";
import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity …

我是 React Native 的初学者。我有一个this.state.forums具有以下值的变量：

{\n    "7": {\n        "id": 7,\n        "wording": "Loisirs, vie sociale et d\xc3\xa9bats"\n    },\n    "3": {\n        "id": 3,\n        "wording": "Forums"\n    }\n}\n

但是当我写时：

<FlatList\n    data={this.state.forums}\n    renderItem={({ item }) => <Item title={item.wording} />}\n    keyExtractor={item => item.id.toString()}\n/>\n

我有这个错误：

\n

不变违规： 不变违规：尝试获取超出范围索引 NaN 的框架

\n

你能帮助我吗 ？

你知道如何在 keyExtractor 中分​​配密钥（不是item.id）吗？

我有一个名为 FlatListShadow 的 Flatlist 包装器，但对于这篇文章，FlatListShadow 和 FlatList 是一回事

我需要在 FlatListShadow 中测试 renderItem 函数，它看起来像这样

renderItem={({ item }) => (
      <Device
        title={item.deviceName}
        platform={item.platform}
        updatedAt={item.updatedAt}
        status={item.status}
        selectDevice={() => selectDevice(item.deviceId)}
        isSelected={selectedDeviceIdList.includes(item.deviceId)}
      />
    )}

不幸的是，在快照中它只提供了这些信息

renderItem={[Function]}

我制作了一个聊天应用程序，并使用平面列表来呈现消息。但问题是每次加载页面时都尝试滚动到屏幕末尾，但失败了。我尝试过反转道具，但什么也没发生，只是列表反转了。

甚至用 ref 让它自动滚动到底部，但什么也没发生。

<FlatList
  ref="flatList"
  onContentSizeChange={() =>
    this.refs.flatList.scrollToEnd()}
  contentContainerStyle={{
    marginBottom:
      verticalScale(200)
  }}
  style={styles.list}
  data={this.state.messages}
/>

如何让它在渲染时滚动到屏幕底部或滚动到消息的最后一个索引？

（更新）

<Content/>这是我使用的属于 native-base 的组件的问题。删除并用 a 替换它后，<View/>它工作得很好。此外，对于基于聊天的应用程序，inverted其中的道具Flatlist是以正确的方式实现的。

我在下面的答案中添加了我设法滚动的方式。如果您只想让应用程序显示列表中的最后一项并保留在那里，您可以使用inverted

我有一个从文件中返回的 JSON 对象./jsonData.json。

在此文件中，我有以下数据：

注意：这是从文件加载的整个 JSON 数据。

import QuizData from './quizData.json'

这是一个新应用程序，QuizData以下所有内容也是如此：

[
    {
        "id": 1,
        "name": "Lesson 1",
        "topics": [
            {
                "topicID": 1,
                "topicName": "Science",
                "topicDescription": "Science quiz questions"
            },
            {
                "topicID": 2,
                "topicName": "General Knowledge",
                "topicDescription": "General Knowledge Quiz Questions"
            }
        ]
    }
]

我正在尝试为找到的每个主题获取主题名称并将其作为文本发布。

这是我的代码：

<FlatList
    data={QuizData}
    renderItem={({ item, index }) =>
        <View>
            <Text>{item.topics.topicName}</Text>
        </View>
    }
    keyExtractor={(item) => item.topicID.toString()}
/>

我也试过：

{item.topics.[index].topicName}

和

{item.topics[index][topicName]}

但我收到错误：

undefined 不是一个对象。

然后我认为它可能需要：

data={QuizData.topics}

然后将 renderItem 更改为：

{item.topicName} …

我正在使用本机反应。现在，当我尝试将平面列表置于屏幕中央，并专门为平面列表提供 justifyContent 和alignItems 时，它给了我一个奇怪的动作。另外，以 justifyContent 和alignItems 为中心的contentContainerStyle 也给出了一个奇怪的动作。昨天一整天都在寻找解决方案。我将在下面提供代码和图像。谢谢。

我试图在中心对齐这个平面列表，就像 justfyContent 和alignItems 会做的那样。您可以看到内容向屏幕左侧倾斜。

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import SearchBarComponent from "../components/SearchBar";
import PokeBanner from "../components/PokeBanner";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response) …