从反应本机 SectionList 中的部分项目访问部分数据答案

【问题标题】：Access section data from section items in react native SectionList从反应本机 SectionList 中的部分项目访问部分数据
【发布时间】：2018-03-17 23:54:50
【问题描述】：

我需要访问 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)
    }

示例数据结构

【问题讨论】：

标签： react-native

【解决方案1】：

renderItem prop 将单个参数传递给函数。该参数是一个包含item和section数据的对象。

renderItem: (info: { item: Item, index: number, section: SectionT, 分隔符：{ 高亮：() => void，取消高亮：() => 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,
  }
});

【讨论】：

I 结果为未定义
能否添加示例数据结构
我已经添加了上面的示例数据结构。键用于显示节标题，数据用于导出特定节的行
@Shanaka 用一个工作示例更新了答案。请将其与您的代码进行比较，并尝试找出有什么不同并且不起作用。
在我的项目中执行时，相同的代码给了我 undefined 。看来这是我正在使用的版本中的一些错误。我目前正在使用“react”：“16.0.0-alpha.6”和“react-native”：“0.44.0”。当我在 expo v17.0.0 （相当于 rn v 0.44.0 ）上测试您的代码时，它会给出相同的未定义输出。感谢您的宝贵时间。

【解决方案2】：

Output of this will look like attached image Link 
https://i.stack.imgur.com/Y7CLF.png 此解决方案图像的输出。

https://pastebin.com/embed_js/7kYrk8kf 此演示的虚拟 JSON 文件 URL 链接。

我在 @bennygenel 代码的帮助下以下列方式使用了上面提到的 JSON 和 Section List。

 renderItem = ({ item, section }) => <Text>{`${item.title}`}</Text>;


renderSectionHeader = ({ section }) => {

return (
  /*  <View style={styles.sectionHeader}>
    <Text style={styles.header}>{section.key}</Text>
  </View> */
 ****Custom Header Component ****
  <CellHeader title={section.title} />
);
 };

renderSectionList = () => {

return (
  <View>
    <SectionList
      sections={data1.results}
      renderItem={this.renderItem}
      renderSectionHeader={this.renderSectionHeader}
    />
  </View>
);

};

【讨论】：