标签: react-native-flatlist

我正在尝试使用 react native 构建一个聊天应用程序。我正在使用 flatlist 列出对话的消息。

export default class ExampleConversation extends React.Component {
    _renderItem = ({item}) => {
        return (
            <View style={{backgroundColor: 'white', margin: 4, flexDirection: 'row'}}>
                <Text>{item.sender.id}</Text>
                <Text>{item.body}</Text>
            </View>
        )
    };

    render() {
        return <FlatList
                    data={data}
                    renderItem={this._renderItem}
                    keyExtractor={(item, id) => item.id}
                    style={styles.container}
                    inverted={true}/>
    }
}

从服务器获取的 JSON 数据：

const data = [
    {
        "id": 13,
        "sender_id": 1,
        "body": "Some message"
    },
    {
        "id": 12,
        "sender_id": 1,
        "body": "Some message"
    },
    {
        "id": 11,
        "sender_id": 5,
        "body": "Some message"
    } …

我正在构建多个选择模式。当用户按下该项目时，该项目应标记为“已检查”。

问题我从 id 数组中添加/删除了 id。当我打开并检查模态时，它没有显示“检查”标志。但是当我再次关闭并打开模态时，它显示“检查”标志。

为了跟踪所选项目，我在模态组件的状态中定义了这些项目。

  state = {
    selectedSeasonIds: this.props.selectedSeasonIds,
   }

这是我用来在屏幕上显示模态的 react-native-modal

<Modal
      isVisible={isSelectorVisible}
      onBackdropPress = {() => this.props.hideSelector()}>
      <View style={styles.modalContainer}>
          <FlatList
              style={styles.root}
              data={this.props.items}
              ItemSeparatorComponent={this._renderSeparator}
              keyExtractor={this._keyExtractor}
              renderItem={this._renderItemForMultiple}/>
      </View>
</Modal>

这是每个项目的渲染功能

_renderItemForMultiple = ({item}) => {
    return (
      <TouchableOpacity
        style={styles.itemStyle}
        onPress={() => {this._handleMultipleItemPress(item.id)}}>
        <RkText>{item.value}</RkText>
        { this._renderCheck(item.id) }   <<< Here is the problem
      </TouchableOpacity>
    );
  }

当用户单击该项目时，FlatList 的项目调用 _handleMultipleitemPress

  _handleMultipleItemPress = (id) => {
    let { selectionType } = this.props;
    let { selectedSeasonIds, selectedSizeIds, selectedColorIds } = this.state;
    if(selectionType===2) …

我正在拉取 flatlist 并刷新标题。在执行时，微调器不会出现。请告诉我我必须解决什么问题。我们需要使用刷新控制吗？

环境

react-native-cli: 2.0.1

反应原生：0.52.0

节点：v8.9.4

class ListSwipe extends Component {

  constructor(props) {
    super(props);
    this.state = { keywords: "", isLoading: true , results:[] , oldresults:[] , isFetching: false }     
  }

  componentDidMount() { 
    return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          isFetching: false  ,
          results: responseJson,
          oldresults: responseJson
        },...

makeRemoteRequest() {
....
}

handleRefresh = () => {

  this.setState({ isFetching: true }, function() {
    this.makeRemoteRequest()
  });

}


 ....
              <ScrollView style={styles.scroll}>


        <Text> Keywords : {this.state.keywords} </Text>



               {this.state.loading …

我有一个对象数组，如下所示。所有对象都没有唯一键。

[
   {
       data1: "text1",
       data2: "text2"
   },
   {
       data1: "text3",
       data2: "text4"
   }
]

我有一个 FlatList 定义如下：

<FlatList

     data={this.state.items}
     renderItem={this.renderItem}
/>

我也尝试添加：

 keyExtractor={this._keyExtractor}

但我仍然收到相同的消息。我不确定上面this._keyExtractor应该做什么。它是拉索引的内置函数还是我应该自己创建的函数？

我做错了什么，我怎么能只使用数组索引作为我的唯一键？

我正在测试嵌套在导航器中的 FlatList 并试图了解它是如何工作的。下面的代码工作正常：

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
    horizontal={true}
/>

但这不会：

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <TextComp data={item}/>}
    horizontal={true}
/>

TextComp 只是一个显示 item.key 的组件，并且在单独测试时按预期工作。代码是

<View> 
    <Text>{this.props.data.key}</Text> 
</View> 

我还尝试在两个组件周围绘制边框，似乎 FlatList 肯定正在呈现，但项目不是。

我正在我的 Android 设备上进行测试。

更新：我向 TextComp 组件添加了 console.log(this.props) 语句，它正确显示了道具，因此正确的数据正在从 FlatList 传递到 TextComp，但 TextComp 没有被呈现。

我正在尝试使用 RN flatlist 来显示一个大的联系人姓名列表（100 多个项目）。我不断收到以下警告：

VirtualizedList：您有一个更新缓慢的大列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等。

每当列表中有超过 50 个项目时，某些动画 UI 项目就会变得非常缓慢，但是一旦我一直向下滚动到列表底部，缓慢就会好很多

我一次性获取所有联系人并将它们存储在 redux 存储中的数组中。我曾尝试使用像 initialNumToRender 这样的道具，但似乎无法提高性能。我可以做些什么来改进我的清单？我以前从未使用过 RN FlatList 所以任何提示将不胜感激

这是我的列表相关代码：

renderRow = ({item}) => {

 return (
  <ListItem
   title={item.firstName}
   chevronColor={colors.tertiary}
  />
 )
}


  <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   initialNumToRender={10}
   removeClippedSubviews={true}
  />

this.props.contacts 是 redux 存储中的联系人对象数组

在我的componentDidMount()我做一个查询，我从 MongoDb 数据库接收一些我想显示在FlatList. 当我收到查询的结果时，我使用state.list函数mapToList()将它们映射到我的list.id我这里使用的是_id由 MongoDb 本身生成的插入文档。只是有一个id在这里工作。然后我添加key={item.id}到我的renderItem({item})方法，但我仍然收到错误，我必须将键添加到我的 VirtualizedList 或使用 KeyExtractor。

我试图从FlatList使用中删除一个项目，Swipeout但首先我必须让这个id东西工作。

export default class MyFlatList extends React.Component{
 state={   
 loading: false,
 list: [{
   name: '',
   subtitle: '',
   rightSubtitle: '',
   rightTitle: '',
   id: undefined
 }]
};

mapToList();

mapToList(result)
{ 
  const list = [];
  for(var i = 0; i<result.length; i++)
  {
      list[i] =  {name: result[i].name,
      subtitle : result[i].projectname,
      rightTitle : …

所以我从我的第一个组件导航到 FooItems 页面，并将道具传递给导航。

    showFooItemsPage = () => {
        this.props.navigation.navigate('FooItemsComponent', {
            fooItems: this.props.fooItems});
  };

在我的 FooItemsComponents 上，我有一个带有 renderItems 函数的 Flatlist，并且正在运行。但是，我想对 Flatlist 项目列表进行更改，然后我想在我的 Flatlist 组件的标题中单击“保存”。

我现在遇到的主要问题是向我的 Flatlist 的 Header 组件发送道具。道具未定义，我不知道如何从我的 FooItemsComponent 或当我在页面之间导航时向它发送道具？

这是我的 FooItemsComponent 中的一些片段：

class Header extends Component {

    constructor(props) {
        super(props);

    }

    async componentDidMount() {
       //call some reducer action 
      }

    save = items => {
        this.props.saveItems(items);
        this.props.navigation.navigate("previousComponent");
    }

    render() {
        const {navigation, loading } = this.props;

        return (
        <View>
            <View style={styles.header}>
                <TouchableOpacity onPress={this.save}>
                    <Text style={styles.saveText}>Save</Text> 
                    </TouchableOpacity>
                </View>
            <View
                style={{
                borderTopWidth: …

我正在尝试FlatList在 React Native 中渲染一个像图像轮播一样的图像。

我想在资产文件夹中提供图像源并在 renderItem 中传递每个项目源，但我得到错误 undefined is not an object。

这是状态：

export default function App() {
  const [images, setimages] = useState([
    {src:require('./assets/image1.png'),key:'1'},
    {src:require('./assets/image2.png'),key:'2'},
    {src:require('./assets/image3.png'),key:'3'},
    {src:require('./assets/image4.png'),key:'4'},
    {src:require('./assets/image5.png'),key:'5'}
  ]);

这是FlatList：

<FlatList
  horizontal={true} 
  showsHorizontalScrollIndicator={false} 
  data={images}
  renderItem={ ({images}) => (
    <Image source={images.src} style={{
      width:260,
      height:300,
      borderWidth:2,
      borderColor:'#d35647',
      resizeMode:'contain',
      margin:8
    }}></Image>
  )}
/>

我有一个包含两个项目的 FlatList。我需要用另一个元素附加这个列表。当用户单击按钮时，来自文本输入的数据应出现在 FlatList 的末尾。所以，我试图将数据对象推送到列表数组的末尾，但新项目取代了最后一个。

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

export default function HomeScreen() {

  var initialElements = [
    { id : "0", text : "Object 1"},
    { id : "1", text : "Object 2"},
  ]

  const [exampleState, setExampleState] = useState(initialElements);
  const [idx, incr] = useState(2);

  const addElement = () => {
    var newArray = [...initialElements , {id : toString(idx), text: "Object " + …