react-native-flatlist

问题 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 am trying to use RN flatlist to show a large list of contact names (100+ items). I keep getting the following warning: 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. Certain animated UI items get very sluggish whenever the list has more than 50 items in it, however the sluggishness gets a lot better once I scroll all the way down

问题 When click the row extends the content, keep that row position at same place (in same viewport) and show the extended content below. Actual Result: Right now, its moving up the old content above and shows the new content in that position. Expected Result: I want the touched row should be at same place if its extends the row height. So Row should be in the same place where user touched in the screen and they can disable it again by touching in the same position. How can I achieve this? 来源：

问题 I meet a problem, on the page it has a header, a scroll tab which the main content is two FlatList. I use animation, let the header in a single view and use absolute layout. this solution has a problem, the FlatList can not scroll, it only scrolls the scrollView. when the data grow, the performance is bad. t it is the solution code: <Animated.View style={{ width: "100%", position: "absolute", transform: [{ translateY: this.headerY }], backgroundColor:'red', top: 50, elevation: 0, flex: 1,

问题 I make a reusable component to render a Flatlist and inside I have a TouchableOpacity when pressed it I want to navigate to a specific screen, and I pass some params based on items inside FlateList So when I pressed to navigate i got an error can't read property navigate of undefined here is my code const OrdersList = props => { return ( <View style={styles.container}> <FlatList data={props.data} renderItem={({item}) => { return ( <TouchableOpacity onPress={() => props.navigation.navigate

问题 As we can use load more functionality when onEndReached , the same way how can we use load more when we reach to the top of the list ? Also while doing this when I load more data at the top, Flat list moves to the very top element and hence scroll becomes infinite. thanks. 回答1: Yes, we can achieve this in React native 0.60 and above, since the significant changes been made in the Virtual list. Still its doesn't contain the solution for Android. 回答2: 1) You can use onScroll callback and get

问题 So I'm trying to use React Native's FlatList renderItem property, but something very strange is happening. The data property is set to an array which has elements which are not undefined, but then, in the renderItem function, it gives me an error saying that the argument of the function is undefined, unless I call the argument item . Here's my code: export default class Profile extends React.Component { onLearnMore = (user) => { this.props.navigation.navigate('UserDetail', user) } render() {

问题 I'm making a chat box with Flatlist . I want to add a new item to data then scroll to bottom of list. I use scrollToEnd method but it did not work. How can I do this? <FlatList ref="flatList" data={this.state.data} extraData = {this.state} renderItem={({item}) => <Text style={styles.chatFlatListItem}>{item.chat}</Text>} /> AddChat(_chat){ var arr = this.state.data; arr.push({key: arr.length, chat: _chat}); var _data = {}; _data["data"] = arr; this.setState(_data); this.refs.flatList

问题 I have 2 FlatList inside a ScrollView. The ScrollView and the second FlatList lags as soon as the FlatList comes into view. I tried keeping only one FlatList and it works pretty smooth. I'm also using PureComponent to render each individual items for the FlatList class HourlyItem extends React.PureComponent { render() { return ( <View style={styles.row_2_item}> <Text style={styles.row_2_item_time}>11:00</Text> <Image source={{uri: 'icon_sun'}} style={styles.row_2_image1}/> <Text style={styles

问题 Im trying to fetch data from redux to a FlatList and onRefresh={} gives me an infinity loop. When i dont use redux it works but when i moved my fetching into a redux action im getting confused. Can someone describe to me what I am doing wrong? Thanks in advance. use my snack: https://snack.expo.io/@thesvarta/redux-with-flatlist Heres my component import React, { Component } from 'react'; import { connect } from 'react-redux'; import { View, Text, FlatList, StatusBar, StyleSheet,