2017-08-03 7 views
0

私は、ネイティブの反応でFlatListを使用する方法を学びたいと思いますが、データ内の要素をプッシュする方法(FlatList配列)を理解することはできません。誰か助けてくれますか?あなたはFlatlistコンポーネントにデータ小道具を追加する必要が反応したネイティブのFlatListでTextInputをプッシュするにはどうすればいいですか?

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

答えて

2

は、ここに私は、ネイティブコードを反応させるのです。

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

renderItemは基本的にデータ配列内の要素をループしています。データがない場合は、それを行うことはできません。空のデータで始める場合は、data = {[]}を使用してください。

関連する問題