react-native-flatlist

问题 I'm struggling to create a requirement for my React-Native application where I am having a blank dropbox(on dropping a flatlist item it should convert into a draggable flatlist) and a draggable flatlist from where I have to drag and drop to the blank dropbox and vice-versa. The items in both the flatlists should have a right side menu on click to which should show a option to move to the item to the other flatlist. I know it's a very common scenario but as I'm quite new to React-Native so I

问题 What is the best possible way to apply lazy load in Flatlist in react native. Currently there is infinite scroll in the flatlist. I am new to React native so i dont have any idea. 回答1: You should use <FlatList .... onEndReached={this.endReached} onEndReachedThreshold={.7} .../> the onEndReached : Called once when the scroll position gets within onEndReachedThreshold of the rendered content. and onEndReachedThreshold : How far from the end (in units of visible length of the list) the bottom

问题 What is the best possible way to apply lazy load in Flatlist in react native. Currently there is infinite scroll in the flatlist. I am new to React native so i dont have any idea. 回答1: You should use <FlatList .... onEndReached={this.endReached} onEndReachedThreshold={.7} .../> the onEndReached : Called once when the scroll position gets within onEndReachedThreshold of the rendered content. and onEndReachedThreshold : How far from the end (in units of visible length of the list) the bottom

问题 I use FlatList with large number of items. I get following alert from Expo XDE. VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":13861,"prevDt":1498372326027,"contentLength":6624} I used some optimization approaches to my FlatList for example PureComponent, but I still get this alert. Before I will describe my optimizations,

问题 I am using React Native 0.44.0 and I am attempting to make a horizontal FlatList using a card style layout. For whatever reason, no matter what I do, I cannot get the horizontal mode to activate. It always seems to render vertically... Here is the code I am using: <FlatList horizontal={true} data={this.state.newsFeed} refreshing={this.state.refreshing} ref={ref => { this.newsFeedListRef = ref; }} renderItem={this.renderNewsFeedRow.bind(this)} keyExtractor={(item, index) => `feed_${index}`}

问题 I test FlatList. Here is what I want to do: 1. Get 10 initial data with componentDidmount 2. Scroll down to get 10 more data App.js import React from 'react'; import { View, SafeAreaView, Text, FlatList, } from 'react-native'; import throttle from 'lodash.throttle'; import { tmpPosts } from './src/data/tmpdata'; class App extends React.Component { constructor(props) { super(props); this.page = 0; this.state = { posts: [], }; this.getMoreDataThrottled = throttle(this.getMoreData, 3000); }

问题 I used FlatList to display the title that is in the data. I added in TouchableOpacity for the FlatList . So for example, when I click 'First', I want to show the the data from 'mood' and it will show the list of passionate,rousing and confident. I want to show the list on a new file/screen and show purely the mood of list. This is my data: const Mock = [ { title: 'First', mood: [ {name: 'passionate'}, {name: 'rousing'}, {name: 'confident'}, ], }, { title: 'Second', mood: [ {name: 'rollicking'

问题 I used FlatList to display the title that is in the data. I added in TouchableOpacity for the FlatList . So for example, when I click 'First', I want to show the the data from 'mood' and it will show the list of passionate,rousing and confident. I want to show the list on a new file/screen and show purely the mood of list. This is my data: const Mock = [ { title: 'First', mood: [ {name: 'passionate'}, {name: 'rousing'}, {name: 'confident'}, ], }, { title: 'Second', mood: [ {name: 'rollicking'

问题 I have a FlatList with multiple columns: <FlatList numColumns={4} ItemSeparatorComponent={this.renderSeparator} ... </FlatList> And a line separator: renderSeparator = () => ( <View style={{ backgroundColor: 'red', height: 0.5, }} /> ); But the separator only appear between rows, not between columns (even if i add width: 0.5 View on expo 回答1: you can just add if else condition inside renderItems and check the index modulus to add separator.. I just use this one and everything works great.

问题 I have a FlatList with multiple columns: <FlatList numColumns={4} ItemSeparatorComponent={this.renderSeparator} ... </FlatList> And a line separator: renderSeparator = () => ( <View style={{ backgroundColor: 'red', height: 0.5, }} /> ); But the separator only appear between rows, not between columns (even if i add width: 0.5 View on expo 回答1: you can just add if else condition inside renderItems and check the index modulus to add separator.. I just use this one and everything works great.