Question

我需要在react-native SectionList中访问有关renderItem内部（index，value）的信息。根据{{3}}部分，细节可以通过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)
    }

示例数据结构

http://docs.w3cub.com/react_native/sectionlist/#renderitem

Answer 1

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

renderItem：（info：{item：Item，index：number，section：SectionT，分隔符：{highlight：（）=＆gt; void，unhighlight :(）=＆gt;无效， updateProps :(选择：＆＃39;领先＆＃39; |＆＃39;尾随＆＃39;，newProps：Object）=＆gt; void，}，}）=＆gt; ？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,
  }
});

Answer 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与“节列表”一起使用。

 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>
);

};

访问响应本机SectionList中的节项的节数据

2 个答案: