如何在本机反应中将 TextInput 推送到 FlatList 中？答案

【问题标题】：How to push TextInput in a FlatList in react native?如何在本机反应中将 TextInput 推送到 FlatList 中？
【发布时间】：2017-08-03 13:16:36
【问题描述】：

我想学习在 react native 中使用 FlatList，但我不知道如何在数据中推送元素（FlatList 数组）。有人能帮我吗？

这是我的反应原生代码：

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,
  }
});

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

您需要在 Flatlist 组件中添加 data 属性。

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

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

【讨论】：