import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Image,
    Text,
    SectionList,
    TouchableHighlight,
} from "react-native";

var sections = [];
for (var i = 0; i < 10; i++) {
    var datas = [];
    for (var j = 0; j < 10; j++) {
        datas.push(
            {title: 'title:' + j}
        );
    }
    sections.push(
        {test: i, data: datas}
    );
}

export default class App extends Component {

    _renderItem = ({section, item, index}) => {
        var txt = 'section:' + section.test + '  item:' + item.title + '  index:' + index;
        return (
            <TouchableHighlight onPress={() => this._onPress(index, item)}>
                <View style={{height: 50, backgroundColor: 'red'}}>
                    <Text style={{textAlignVertical: 'center', textAlign: 'center'}}>{txt}</Text>
                </View>
            </TouchableHighlight>
        )
    }

    _renderSectionHeader = (section) => {
        var txt = 'section: ' + section.section.test;
        return (
            <View style={{height: 30, backgroundColor: 'blue'}}>
                <Text style={{textAlign: 'center', textAlignVertical: 'center', fontSize: 18}}>
                    {txt}
                </Text>
            </View>
        );
    }

    _keyExtractor = (item, index) => {
        return index;
    }

    render() {

        return (
            <View style={{flex: 1, backgroundColor: 'white'}}>
                <SectionList
                    sections={sections}
                    renderItem={this._renderItem}
                    renderSectionHeader={this._renderSectionHeader}
                    keyExtractor={this._keyExtractor}
                />
            </View>
        );
    }

    _onPress(index,item) {

        alert(item.title);
    }

}
const styles = StyleSheet.create({});```