ネイティブFlatListに反応する - コンポーネントを返すレンダリングメソッドで関数を呼び出す

Question

FlatListを使用して、選択されている各項目をハイライトまたはティックする選択可能なリストを作成しています。これは、出力Iである

renderItem = (item) => { 
    return (
     <View> 
     <Text>aaa</Text> 
     {this.props.renderItem(item)} 
     <Text>xxx</Text> 
     </View> 
    ); 
    } 

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

：として私はリストを定義しています選択-list.js上

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

：私はコンポーネントをこのように使用していindex.jsに

取得：

AAA

XXX

AAA

XXX

AAA

B

：私はそれがあることを期待

AAA

XXX

XXX

このラインが機能していません。

{this.props.renderItem(item)} 

Answer 1

FlatListの引数は

(info: { 
    item: ItemT, 
    index: number, 
    ... 
}) 

です。

意味、あなたのレンダリング機能は次のようになります。私はES6、THANKSのこの機能を逃した

renderItem = ({item}) => { 

ませ

renderItem = (item) => { 

Answer 2

これはのRenderItemに送信された引数のコンソールログで、私は

{ item: { key: 'a' }, 
index: 0, 
separators: 
{ highlight: [Function: highlight], 
unhighlight: [Function: unhighlight], 
updateProps: [Function: updateProps] } } 

を動作させる機能に item.itemに合格しなければなりませんでした