如何在FlatList中將TextInput推入本機？

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組件添加數據的道具。

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

renderItem基本上循環了數據數組中的元素。如果沒有數據，它不能這樣做。如果您是以空數據開始，請使用data = {[]}