react-native-flatlist

问题 I have a FlatList which fills with about 18000 text rows. Because the text in each row is of variable length, I cannot provide a static height for use in getItemLayout. What I am attempting to do is first iterate through the entire dataset using a dummy view, from which I collect the height dimension via onLayout. My issue is that currently, the view is only re-rendering around 10 times before it just stops. As far as I can tell, onLayout simply isn't called for the last view that ends up

问题 I am trying to send the data of the flatlist items when clicked and set to another class.The ontouch is working but I am having the error below in the image. Also how can I send the data of api to the other class and get from another class? I have implemented as follows: export default class FlatSpeakers extends Component { constructor(props) { super(props); this.state = { isLoading: true, data: [],selectedItem: null, } const { navigate } = this.props.navigation; } onPressItem = () => {

问题 ...inside a dispatch, in the path: "chat.messages.0' Take a look at the reducer(s) handling the action {'type': 'chat', 'payload': {'sender': 'you', 'body': 'foo'}}` My reducer: chatMessage.js: export default (state, action) => { return Object.assign({}, { ...state, messages: [...state.messages, action.payload] }) } Interestingly, if I use messages=[] in my Chat component, I don't get this error. export default class Chat extends React.Component { state = {...this.props.data, input: "",

问题 I have a RN (0.44.2) mobx (3.1.10) app which uses a FlatList . I'm basically following https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb When using my own store, opposed to the examples, I'm having to use toJS() in order to get the FlastList to render // renders list <FlatList data={this.props.giphyStore.images.toJS()} keyExtractor={(_, i) => i} renderItem={({ item }) => <Text>found the data</Text>} /> // does not render list <FlatList data={this.props

问题 Is it possible to render multiple TextInputs from an API using React-Native? I am working on a project which fetches JSON from an API and first displays a list of Items (Only the title) using FlatList, then I click in one of them and navigates to next page which shows details of that selected item. However, there will be continuously new documents added in API which contains a different number of TextInputs, some might have 3, some 2 and so on. Document contains also a title, text, image but

问题 As you can see in the picture above, there is a vertical list of two columns. I have developed two flatLists because I can not style photos with different height on one line with the flatList column option. I want two flatLists to have the same scroll position. I wrapped two FlatList component with to synchronize scrolling. But there is a problem here. The scrollView ignores the infinity scroll and calls the pagination objects all at once. There is a performance problem. How can I solve this

问题 How can I list 2 columns in a React Native Flatlist, e.g.: 回答1: Just pass the prop numColumns to your FlatList component. 回答2: You can do it in one of two ways. First the straight forward way is to create 2 FlatList columns with flex layout and distribute your data between them like so: Assuming you have style and data defined const style={ container: { flex: 1, flexDirection: 'row', height: 400 }, column: { flex: 1, flexDirection: 'column' }, row: { flexDirection: 'row' }, item: { flex: 1 }

问题 i'm trying to declare an variable inside the FlatList component in React Native But i get unexpected token, when i do declare it. const FixturesScreen = ({ navigation }) => ( <ScrollView style={styles.container}> <FlatList data={clubData.data.clubs} renderItem={({ item }) => ( let fixture = item.name //unexpected token <View> <View> <Text style={styles.itemTitle}>{item.name}</Text> <ScrollView horizontal> <Text style={styles.listItem}>{fixture}</Text> </ScrollView> </View> </View> ) } /> <

问题 I have a horizontal FlatList, where each time it reaches the end, it automatically adds new elements to the list, so it kind of is an infinite list. I want the app to scroll through the list by itself automatically, while the user must still be able to scroll back and forth. This is what I have to far export default class ImageCarousel extends Component { constructor(props) { super(props); this.scrollX = 0; this.offset = new Animated.Value(0); this.scrollTo = this.scrollTo.bind(this); this

问题 Problem I am using a flatlist in react native, and want to compare to variables in the flatlist, and render a text component if the two variables are equal, but render nothing if they are not. I've tried many methods of doing this, but they nothing has worked. I would love some help figuring out a way to do this! Thank you. 回答1: Couple ways that spring to mind straight away. Ill just assume what you are trying to compare but you can switch these variables out for whatever you please. First