Ako tlačiť TextInput v FlatList v reakcii native? - reaktívny, natívny, reagujúci-natívny-plochý zoznam

Chcem sa naučiť používať FlatList v reakcii natívne, ale dokážem prísť na to, ako tlačiť prvky v údajoch (pole FlatList). Môže mi niekto pomôcť?

Tu je môj natívny kód reakcie:

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

odpovede:

Do komponentu Flatlist musíte pridať dátovú podporu.

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

renderItem v podstate opakuje prvky v dátovom poli. Nemôže to urobiť, ak neexistujú žiadne údaje. Ak začínate s prázdnymi údajmi, použite údaj = {[]}