react-native-flatlist

问题 I have a problem with FlatList component which does not update until scrolled. I tried add log to renderItem and keyExtractor both methods called with correct data but list didn't update. Here is a render method: render() { const messages = this.props.messages const message = this.props.message return ( <View style={[styles.container]}> <FlatList ref={"flatList"} contentContainerStyle={styles.list} data={messages} renderItem={(listItem) => { return <MessageBuble message={listItem.item}/> }}

问题 I'm trying to get some specific data to appear within some tags but it does NOT show. However, when I console.log the same data that I'm trying to get in the Text tags, I can see it. Here is my code import React, { Component } from 'react'; import { View, FlatList, Text } from 'react-native' import { NavigationActions } from 'react-navigation'; import { Header } from '../common'; import Config from '../Config'; export default class Costco extends Component { constructor() { super(); this

问题 Final Update I'm answering my own question. See answer below. Update of Update Still no luck even after I fixed the issue with this.state.updating. Apparently there is more than one issue going on here. Update It turns out I had reused some old FlatList code I'd written for an earlier app without reusing other references to this.state.updating, which is what I am pointing extraData to. So I was effectively pointing extraData to nothing. My best guess as to why this only stopped FlatList from

问题 I'm trying to create a FlatList that contains an array with objects that has an array from a server and I can't get it to work. my error message: TypeError: Cannot read proparty 'Data' of undefined I can get it to work with my normal list that's not fetched from a Server. Heres the structure from my working list [{"DATA":[{"filter_id":"44","filter_name":"filter 1"}, {"filter_id":"45","filter_name":"filter 2"},{"filter_id":"46","filter_name":"filter 3"},{"filter_id":"47","filter_name":"filter

问题 This is my JSON file { "name": "Thịt bò", "noed": 5 }, { "name": "Thịt heo", "noed": 3 } I get them to Flatlist <FlatList data={cats} keyExtractor={item => item.name} renderItem={({item})=>( <View> <Text style={styles.catsItem} onPress={() => this.changeTextInput(item.name)}>{item.name} {item.noed}</Text> </View> )} /> But I want to send 2 values are item.name and item.noed to TextInput then send them to another screen changeTextInput(item){ this.setState({name: item}); }; But I don't know

问题 How to optimize performance of Flatlist when we have large data. My list has both an image and an text description. I want to find a way to increase performance of list and remove extra images loaded from the cache list and make the list not heavy . 回答1: There is something called PureComponent in react native. If you create your FlatList item as PureComponent , you can see lot of improvement. It will not rerender items untill data has been changed. Something like this : class MyListItem

问题 I want to have a list of multiple switches to essentially create a list of activities for the user to then "select/check" if they are interested in one or more. My plan was to use a switch as the renderItem of a Flatlist, but I am having trouble with two things. 1) I can't get the switch to stay toggled on when it is in the Flatlist. I had it working at one point but messed it up since. 2) When it was working, all the switches would toggle together. Any help would be much appreciated! import

问题 I have a React Native FlatList. base on Documentation I used onViewableItemsChanged for getting the current showing item on the screen. but while scrolling or when scrolling stops nothing happens and I can't get the current Id. How Can I use it in correct way? export default class TimeLine extends Component { constructor(props) { super(props); this.renderTimeline = this.renderTimeline.bind(this); this.state = { timeline: [], }; this.handleViewableItemsChanged = this.handleViewableItemsChanged

问题 I am trying to create a chat in React native using a <Flastlist /> Like whatsapp and other chat apps, the messages start at the bottom. After fetching the messages from my API, I call this.myFlatList.scrollToEnd({animated: false}); But it scrolls to somewhere in the middle and sometimes with fewer items to the bottom and sometimes it does nothing. How can I scroll initially to the bottom? My chat messages have different heights, so I can't calculate the height. 回答1: I had similar issue. If

问题 I have an interesting bug that is happening to my text. For some reason text is randomly getting cut off like so: const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: "#ecf0f1", width:"100%", paddingTop:"5%" }, itemContainer: { backgroundColor:"#fff", margin:"5%", marginTop: 0, borderRadius:5, width: "90%" }, itemHeaderContainer: { padding:15, borderColor: "#E4E2E9", borderBottomWidth: 1 }, itemHeaderText: { height:'auto