Question

我想学习在本机中使用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,
  }
});

Answer 1

您需要在Flatlist Component中添加数据prop。

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

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

如何在FlatList中将TextInput推送到本机？

1 个答案: