react-native - 从 react native SectionList 中的部分项目访问部分数据

Question

我需要访问 react-native SectionList 中 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 属性将单个参数传递给函数。该参数是一个包含item和section数据的对象。

renderItem: (info: { item: Item, index: number, section: SectionT, separators: { highlight: () => void, unhighlight: () => void, updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, }, }) => ?React.Element

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

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

更新

添加一个示例来演示它是如何工作的。 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,
  }
});