反応ネイティブのListViewでデータを渡すには？

Question

LiestViewでローカルステートをレンダリングしたい。 私はListViewに慣れていません。 動作しませんでした。

export default class Top extends Component { 
    state=[{title: 'a'}, {title: 'b'}, {title: 'c'}] 

    _renderItem = ({item}) => (
    <View> 
     <Text>{item.key}</Text> // here 
     <Category /> 
    </View> 
); 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={this._renderItem(item)} 
     /> 
    ); 
    } 
} 

以下は私のコードです。それは働く。このコードを変更するには？ 私はタイトルが必要です。

export default class Top extends Component { 
    state={ 
    data:[{}, {}, {}] 
    }; 

    _renderItem =() => (
    <View> 
     <Category /> 
    </View> 
); 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={this._renderItem} 
     /> 
    ); 
    } 
} 

お時間をいただきありがとうございます。

Answer 1

状態がオブジェクトでなければなりませんし、あなたがキー小道具を持っていない場合、あなたはkeyExtractorを定義する必要があります：あなたのコンポーネントで

import React, { Component } from "react"; 
import { Text, View, FlatList } from "react-native"; 

export default class Top extends Component { 
    state = { 
    data: [{ id: 1, title: "a" }, { id: 2, title: "b" }, { id: 3, title: "c" }] 
    }; 

    _renderItem = ({ item }) => (
    <View> 
     <Text>{item.title}</Text> 
    </View> 
); 

    // You could use the title instead of the id, but not very scalable 
    _keyExtractor = (item, index) => item.id; 

    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={this._renderItem} 
     keyExtractor={this._keyExtractor} 
     /> 
    ); 
    } 
} 

Answer 2

まずインポートリストビュー

import {View, Text, ListView} from 'react-native'; 

ますマウントは、リストビューをレンダリングするこの

componentWillMount(){ 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.dataSource = ds.cloneWithRows(this.props.yourProps); 
} 

のようなデータソースを作成

render() { 
    return (
     <View> 
      <ListView 
       enableEmptySections 
       dataSource = {this.dataSource} 
       renderRow={this.renderRow} 
      /> 
     </View>  
    ); 
} 

最後に、リストビューにどのデータとどのようにデータを表示するかをListViewに知らせる必要があります。このため、リストの行をレンダリングする関数を作成します。

renderRow(yourProps) { 
     return (
      <Text>{yourProps.yourData}</Text> 
     ); 
} 

任意の方法で行をスタイルできます。アイテム：しかし、私のコードの戻りが変数を見つけることができませんhttps://github.com/ishraqe/manage-user/blob/master/src/components/EmployeeList.js