react-native-listview | 易学教程

FlatList Dynamic Height Sizing

阅读更多关于 FlatList Dynamic Height Sizing

问题 I have an AutoComplete Box which gives me a list of autocomplete items. I display the items in FlatList, I also have a border around the FlatList. My code is given below: - render(){ return ( <View> <TextInput clearButtonMode="while-editing" onChangeText={this.onChangeText} value={this.state.searchText} onSubmitEditing={this.onTextSubmitted} placeholder="Find..." /> {this.state.data.length > 0 && <FlatList style={styles.list} keyboardShouldPersistTaps="handled" data={this.state.data}

Finding out scroll direction in react-native listview/scrollview

阅读更多关于 Finding out scroll direction in react-native listview/scrollview

问题 Is there a way to find out the scroll direction of react-native's listview/scrollview components? Native iOS components seem to be able to do it by calculating the offset from scrollViewWillBeginDragging and scrollViewDidScroll , but there seems to be no bindings for these. 回答1: You can use the onScroll event of a ScrollView and check the contentOffset in the event callback: https://rnplay.org/apps/FltwOg 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet,

How to force ReactNative ListView to update a row when row-data change?

阅读更多关于 How to force ReactNative ListView to update a row when row-data change?

问题 ReactNative's ListView is little bit odd when it comes to data updates. I have an array of objects (name: Item), that have 3 properties: id (int) name (string) enabled (bool) The array of items is displayed in a ListView. Each row shows the name of the item and a checkmark representing the enabled-state (red on true, gray on false). In my example it is simplified to a simple string "true"/"false". Each row is embedded in a TouchableOpacity with a onPress-EventHandler, that toggles the enabled

ListView always scrolls back to the top in react-native

阅读更多关于 ListView always scrolls back to the top in react-native

问题 I am using react-native for a iOS mobile app where I am using ListView to display a list of alarms. I have created my own reusable list view component called ComponentListView in which I can pass in the component that I want to render in each row and the data for the list view. If I have a lot of alarms and I scroll down to see the alarms in the end, it always scrolls back to the top (please see sample app below on rnplay with symptoms) and hence I can't operate on the alarms in the end. I

Select a row in ListView react-native to get detail

阅读更多关于 Select a row in ListView react-native to get detail

问题 i'm new in react-native. I saw an example in https://facebook.github.io/react-native/docs/sample-application-movies.html . It is building a movies app that fetch movies and display them in a ListView. How can we select a row to get its detail data and display it in other view? Please help. thanks :) Here's what i've done so far: /** * Sample React Native App * https://github.com/facebook/react-native */ import React, { Component, } from 'react'; import { AppRegistry, Image, ListView,

ReactNative ListView inconsistent separator lines

阅读更多关于 ReactNative ListView inconsistent separator lines

问题 On Android 4.4, ListView separator lines are inconsistent in thickness, and some do not render. I can't see how this can be a code issue, this is how I render them: separator: { height: 1, backgroundColor: 'grey', } ... <ListView renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} /> } .../> Here is a screenshot of a View with this problem: This issue does not happen on iOS or Android 6. Anyone had this problem before? Update I did a test, this

React Native Child Component Not Updated when redux state changes

阅读更多关于 React Native Child Component Not Updated when redux state changes

问题 I have child component that renders a list of items in a ListView. The data for the ListView originates from a Redux store object passed through the parent mapStateToProps. The child object has buttons that will remove an item when pressed. The button fires the appropriate redux dispatch actions and the status is updated correctly, but the child component does not update. Through break points and console statements, I've verified that child componentShouldUpdate and child

RefreshControl in ListView does not work for some unknown reason

阅读更多关于 RefreshControl in ListView does not work for some unknown reason

问题 I get an error when I pull down to refresh. The code is something like this- loadData: function(){ var _this = this; this.API(); //check if data is loaded setTimeout(function(){ if(_this.isMounted()){ if(_this.state.loaded===false){ _this.setState({ isReloadRequired: true }) } } }, 10000); }, API: function(){ var _this = this; this.setState({ rawData: [], isReloadRequired: false, loaded: false, isRefreshing: true }); Parse.Cloud.run('fetchBookingListForUserCloudFunction', { user_id: Parse

React native listview: How to stick a row at bottom of the screen when the row reaches bottom

阅读更多关于 React native listview: How to stick a row at bottom of the screen when the row reaches bottom

问题 Using stickyHeaderIndices (Ref: stickyHeaderIndices) property of listview in react native, it is possible to stick a scrolling row stick on the top of the listview. Is there any way to do the same behavior for sticking the row at the bottom, when the row reaches the bottom of the list? 来源： https://stackoverflow.com/questions/48279260/react-native-listview-how-to-stick-a-row-at-bottom-of-the-screen-when-the-row-r

Search data in ListView react native

阅读更多关于 Search data in ListView react native

I'm currently learning react-native and getting stuck in ListView problems. I want to search data in ListView from a TextInput and i expect that the result is in ListView too. Here's what i've done so far: var PageOne = React.createClass({ getInitialState:function(){ return{ dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, colorProps: { titleColor: 'white', }, searchText:"", } }, componentDidMount() { this.fetchData(); }, fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({