反応したネイティブセクションリストのセクション項目のセクションデータにアクセスする

Question

反応したネイティブセクションリスト内のrenderItem内のセクション（インデックス、値）に関する情報にアクセスする必要があります。 http://docs.w3cub.com/react_native/sectionlist/#renderitemセクションの詳細は、renderItem関数を介して渡すことができます。しかし、アイテム以外のコードでは、他のすべての値は未定義に設定されます。それを行う他の可能な方法はありますか？

render(){ 
      return(
       <SectionList 
        sections={this.props.itemList} 
        renderItem={(item,section) => this._renderNewItem(item,section)} 
        renderSectionHeader={this._renderSectionHeader} 
        keyExtractor={(item) => item.id} 
       /> 
      ) 
     } 

_renderNewItem(item,section){ 
     console.log(item, " ", section) 
    } 

サンプルデータ構造

Answer 1

renderItemプロップは、関数に単一のパラメータを渡します。このパラメータは、アイテムとセクションのデータを含むオブジェクトです。

のRenderItem：（情報：{アイテム：商品、指数：番号、セクション：SectionT、 セパレータ：{ハイライト：（）=>ボイド、ハイライトを消し：（）=>ボイド、 updateProps：（あなたは

renderItem={({ item, section }) => this._renderNewItem(item,section)} 

以下のようにそれを使用することができますセクションデータを取得するには、オブジェクト）=> 、ボイド、}、}）=> React.Element

： '末尾'、newProps | '大手'：選択？

更新

どのように動作するかを示すサンプル例を追加します。 See it on snack.expo.io

import React, { Component } from 'react'; 
import { Text, View, StyleSheet, SectionList } from 'react-native'; 
import { Constants } from 'expo'; 
const data = [{key: 'New', data: [{name: 'Foo1'}, {name: 'Foo2'}]}, {key: 'Old', data: [{name:'Foo3'}, {name: 'Foo4'}]}]; 
export default class App extends Component { 

    _renderItem = ({item, section}) => (<Text>{`${item.name}(${section.key})`}</Text>) 

    _renderSectionHeader = ({section}) => { 
     return (
     <View style={styles.sectionHeader}> 
      <Text style={styles.header}>{section.key}</Text> 
     </View> 
    ) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <SectionList 
      sections={data} 
      renderItem={this._renderItem} 
      renderSectionHeader={this._renderSectionHeader} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 
    sectionHeader: { 
     height: 50, 
     flex: 1, 
     backgroundColor: '#fff', 
     justifyContent: 'center', 
     paddingLeft: 10 
    }, 
    header: { 
     fontSize: 20, 
    } 
});