从 react native SectionList 中的节项访问节数据 [英] Access section data from section items in react native SectionList

问题描述

我需要访问有关 react-native SectionList 中 renderItem 内的部分(索引、值)的信息.根据

解决方案

renderItem prop 将单个参数传递给函数.这个参数是一个对象，包括item和section数据.

<块引用>

renderItem:(信息:{ item:Item，index:number，section:SectionT，分隔符:{ 突出显示:() => 无效，取消突出显示:() => 无效，updateProps : (选择:'领先' | '尾随'，newProps:对象)=>void, }, }) => ?React.Element

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

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

更新

添加示例示例以演示其工作原理.在snack.expo.io上查看

import React, { Component } from 'react';import { Text, View, StyleSheet, SectionList } from 'react-native';从博览会"导入{常量}；const data = [{key: 'New', data: [{name: 'Foo1'}, {name: 'Foo2'}]}, {key: 'Old', data: [{name:'Foo3'},{名称:'Foo4'}]}];导出默认类 App 扩展组件 {_renderItem = ({item, section}) =>(<Text>{`${item.name}(${section.key})`}</Text>)_renderSectionHeader = ({section}) =>{返回 (<视图样式={styles.sectionHeader}><Text style={styles.header}>{section.key}</Text></查看>)}使成为() {返回 (<视图样式={styles.container}><节列表部分={数据}renderItem={this._renderItem}renderSectionHeader={this._renderSectionHeader}/></查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，paddingTop:Constants.statusBarHeight，背景颜色:'#ecf0f1'，},部分标题:{身高:50，弹性:1，背景颜色:'#fff'，justifyContent: '中心',填充左:10},标题:{字体大小:20，}});

I need to access the information regarding the section (index, value) inside the renderItem in react-native SectionList. According to http://docs.w3cub.com/react_native/sectionlist/#renderitem section details can be passed via renderItem function. But in below code except the item all other values will be set to undefined. Is there any other possible way of doing it?

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

Sample data structure

解决方案

renderItem prop passes a single parameter to the function. This parameter is an object includes item and section data.

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

To get the section data you can use it like below

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

Update

Adding a sample example to demonstrate how it works. 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,
  }
});

这篇关于从 react native SectionList 中的节项访问节数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！