从React Native SectionList中的节项目访问节数据

Question

我需要访问有关本机SectionList中renderItem内的部分（索引，值）的信息。根据http://docs.w3cub.com/react_native/sectionlist/#renderitem，可以通过renderItem函数传递节的详细信息。但是在下面的代码中，除此项外，所有其他值都将设置为undefined。还有其他可行的方法吗？

    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

renderItemprop将单个参数传递给函数。此参数是一个包含项目和部分数据的对象。

renderItem：（信息：{项目：项目，索引：数字，部分：SectionT，分隔符：{高亮：（）=>无效，突出显示：（）=>无效，updateProps：（选择：'前导'|'尾随'， newProps：Object）=> void，}，}）=>？React.Element

要获取部分数据，您可以像下面这样使用它

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

更新资料

添加一个示例示例以演示其工作方式。可以在Snake.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,
  }
});