react-native-flatlist | 易学教程

React Native FlatList Pagination not working - onEndReached doesn't fired

阅读更多关于 React Native FlatList Pagination not working - onEndReached doesn't fired

问题 I am using react-native FlatList component to list of items Pagination is not happening as expected , as per documentation onEndReached has to get fired when end of page is reached, currently I tried changing the values for onEndReachedThreshold ( tried 0.1, 1.0, 0.5, 0.01 ), am setting refreshing flag as well. Note: I am using ReactNative 0.48.4 So here my code <Container style={{ marginTop: 22 }}> <Content style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} > <View style={{ flex: 1

React Native - SectionList numColumns support

阅读更多关于 React Native - SectionList numColumns support

问题 FlatList has numColumns support. How to set numColumns with SectionList? Github issue: SectionList renderItem multi item support #13192 回答1: Here is my solution to numColumns for SectionList. If you have better let me know please. class Example extends Component { static propTypes = { numColumns: PropTypes.number }; static defaultProps = { numColumns: 2 }; _renderSection = data => <Section {...data} />; _renderItem = ({ section, index }) => { const { numColumns } = this.props; if (index %

React-native: how to wrap FlatList items

阅读更多关于 React-native: how to wrap FlatList items

问题 I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wrap like normal text would. But I absolutely do not want to use the column feature, because that would not look as natural. Is this possibly a bad use-case for FlatList? Are there any other components I could use? const styles = StyleSheet.create({ flatlist: { flexWrap: 'wrap' }, content: { alignItems

ScrollToEnd after update data for Flatlist

阅读更多关于 ScrollToEnd after update data for Flatlist

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.scrollToEnd(); } Ourabi I found a better solution, scrollToEnd() is not working because it is triggered before

React Native FlatList with columns, Last item width

阅读更多关于 React Native FlatList with columns, Last item width

I'm using a FlatList to show a list of items in two columns <FlatList style={{margin:5}} data={this.state.items} numColumns={2} keyExtractor={(item, index) => item.id } renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> } /> The card component is just a view with some styles: <View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View> It is working fine, but if the number of items is odd, the last row only contains one item and that item stretches to the full width of the screen. How can I set the item to the same width of the others?

I can't re-render the FlatList after empty data?

阅读更多关于 I can't re-render the FlatList after empty data?

问题 I Get the data from firebase real-time and put it I FlatList and when I delete if from Console "Firebase" it's deleted from the List in screen very well but the last item in the Array "Data" couldn't be deleted I don't know why! I use an onRefresh Props but not help me because we all know the DB is real-time and when we will add any item it's will be in the last without refresh it So it's not work with the last item too and just the loading stuck without re-render the FlatList Although I use

Pause video in flatlist when out of view

阅读更多关于 Pause video in flatlist when out of view

问题 I have a flatlist showing videos. I want that when a video goes out of the view it should be paused. I am maintaining the pause state in each of the Posts component. class Posts extends React.PureComponent { constructor() { super() this.state = { pause: true, } return(){ <Video pause={this.state.pause} //other props /> } } I am using react-native-video . I have tried using onViewableItemsChanged prop of Flatlist but it doesn't change the state. I tried this . But it doesn't seem to work for

How to re-render flatlist?

阅读更多关于 How to re-render flatlist?

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it? My goal is to update the text value when user press button ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { this.list = ref; }} keyExtractor={(item) => item.entry.entryId} data={this.state.data} renderItem={this.renderEntries.bind(this)} horizontal={false} /> ED209 Use the extraData property on

FlatList renderItem is called multiple times

阅读更多关于 FlatList renderItem is called multiple times

I'm using FlatList to display data from an API call: render() { const { navigation } = this.props; const animating = this.state.animating; return ( <View style={styles.container}> <ActivityIndicator animating = {animating} color = '#E3A141' size = {120} style = {styles.activityIndicator} /> <FlatList ref='listRef' data={this.props.data} renderItem={this.renderItem} keyExtractor={(item, index) => index.toString()} /> <SocialFooter navigation={navigation}/> </View> ) } renderItem({item, index}) { console.log("renderItem(item): ", item, "index: ", index) } The returned data is an array with 3

FlatList renderItem is called multiple times

阅读更多关于 FlatList renderItem is called multiple times

问题 I'm using FlatList to display data from an API call: render() { const { navigation } = this.props; const animating = this.state.animating; return ( <View style={styles.container}> <ActivityIndicator animating = {animating} color = '#E3A141' size = {120} style = {styles.activityIndicator} /> <FlatList ref='listRef' data={this.props.data} renderItem={this.renderItem} keyExtractor={(item, index) => index.toString()} /> <SocialFooter navigation={navigation}/> </View> ) } renderItem({item, index})