react-native - How to push TextInput in a FlatList in react native?

Question

I want to learn to use FlatList in react native,but I can't figure how to push elements in data (the FlatList array). Can someone help me ?

Here's my react native code:

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, Button,View ,TextInput} from 'react-native';


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {text: '',
    data:[]
    };
  }

  render() {
    return (
      <View>
      <TextInput
       style={{height: 40}}
          placeholder="Task"
          onChangeText={(text) => this.setState({text})}/>
              <Button title="Add" onPress={this.addTask} />
      <FlatList

  renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  }
});

Answer 1

您需要在 Flatlist 组件中添加数据道具。

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

renderItem 基本上是循环遍历数据数组中的元素。如果没有数据，它就无法做到这一点。如果您从空数据开始，只需使用 data={[]}