在ListView中滚动会使TouchableOpacity无响应

时间:2017-01-17 16:25:36

标签: listview react-native touchableopacity

我们有一个带有一些条目的ListView(在我们的测试用例中有205个条目),当你快速滚动List时,JS Thread fps有时会从60下降到大约20,然后TouchableOpacity元素将无法响应(就像所有其他React Elements一样) )。 UI线程fps保持在60并滚动列表ist仍然可能但是Touchable需要一些时间才能再次响应。

看起来反应正在为事件创建某种队列,并且滚动会向其添加事件,而Touchable上的触摸事件必须等待所有其他"不重要的"要处理的事件。

我们使用React版本15.4.2和React-Native版本0.40.0。

我们可以在LG Nexus 5X和三星Note 4上几乎不断地重现这个问题,遗憾的是它不在模拟器中(x86似乎跑得快,手臂慢)。

这是我们可以重现问题的测试组件。

import * as React from 'react';
import {View, Text, TouchableOpacity, ListView} from 'react-native';

export const SPACING = {
    TINY: 4,
    SMALLER: 8,
    SMALL: 12,
    BASE: 16,
    LARGE: 24,
    XLARGE: 32,
    XXLARGE: 48
};

export const DEFAULT_COLORS = {
    'Accent': '#AF8DE9',
    'NaviBg': '#28222D',
    'SecondaryContainer': '#574c68',
    'SecondaryContainerHeader': '#41384e',
    'Header': '#F5F5F5', // should be #fcfcfc but doesn't work with react-native!???
    'Tabs': '#FCFCFC',
    'Handle': '#AF8DE9',
    'Content': '#FFFFFF',
    'Primary': '#D6AFEB',
    'Green': '#72D2B4',
    'Red': '#E68585',
    'Yellow': '#FABC74',
    'Male': '#9EC6E6',
    'Female': '#EDACC9',
    'Darker': '#3F3F3F',
    'Dark': '#5C5C5C',
    'Normal': '#757575',
    'Light': '#949494',
    'Lighter': '#C2C2C2',
    'LineDivider': '#f3f1f6'
};

const data = '{"Flirt":[{"key":"FLIRT.Flirt","channel":{"channelName":"Flirt","channelMetadata":{"userCount":54}}},{"key":"FLIRT.Ladies only","channel":{"channelName":"Ladies only","channelMetadata":{"userCount":45}}},{"key":"FLIRT.Psssst","channel":{"channelName":"Psssst","channelMetadata":{"userCount":68}}},{"key":"FLIRT.Singles 15-17","channel":{"channelName":"Singles 15-17","channelMetadata":{"userCount":48}}},{"key":"FLIRT.Flirt Private","channel":{"channelName":"Flirt Private","channelMetadata":{"userCount":63}}},{"key":"FLIRT.Flirt 18+","channel":{"channelName":"Flirt 18+","channelMetadata":{"userCount":35}}},{"key":"FLIRT.Flirt 30+","channel":{"channelName":"Flirt 30+","channelMetadata":{"userCount":39}}},{"key":"FLIRT.Videoflirt","channel":{"channelName":"Videoflirt","channelMetadata":{"userCount":22}}},{"key":"FLIRT.Private 23+","channel":{"channelName":"Private 23+","channelMetadata":{"userCount":47}}},{"key":"FLIRT.Suche","channel":{"channelName":"Suche","channelMetadata":{"userCount":43}}}],"Classic":[{"key":"CLASSIC.Nostalgie","channel":{"channelName":"Nostalgie","channelMetadata":{"userCount":4}}},{"key":"CLASSIC.Kiss","channel":{"channelName":"Kiss","channelMetadata":{"userCount":6}}},{"key":"CLASSIC.Welcome!","channel":{"channelName":"Welcome!","channelMetadata":{"userCount":3}}},{"key":"CLASSIC.Family","channel":{"channelName":"Family","channelMetadata":{"userCount":1}}},{"key":"CLASSIC.Knuddels","channel":{"channelName":"Knuddels","channelMetadata":{"userCount":2}}},{"key":"CLASSIC.Classic","channel":{"channelName":"Classic","channelMetadata":{"userCount":1}}},{"key":"CLASSIC.Stammis","channel":{"channelName":"Stammis","channelMetadata":{"userCount":1}}},{"key":"CLASSIC.Mix Classic","channel":{"channelName":"Mix Classic","channelMetadata":{"userCount":1}}},{"key":"CLASSIC.Neustammis","channel":{"channelName":"Neustammis","channelMetadata":{"userCount":1}}},{"key":"CLASSIC.CMs","channel":{"channelName":"CMs","channelMetadata":{"userCount":1}}}],"Spiele":[{"key":"GAMES.Mafia2 Party","channel":{"channelName":"Mafia2 Party","channelMetadata":{"userCount":26}}},{"key":"GAMES.8-Ball","channel":{"channelName":"8-Ball","channelMetadata":{"userCount":19}}},{"key":"GAMES.Mafia2 Vampir","channel":{"channelName":"Mafia2 Vampir","channelMetadata":{"userCount":14}}},{"key":"GAMES.MauMau Kurzturnier Anmeldung","channel":{"channelName":"MauMau Kurzturnier Anmeldung","channelMetadata":{"userCount":14}}},{"key":"GAMES.Fifty! Free","channel":{"channelName":"Fifty! Free","channelMetadata":{"userCount":11}}},{"key":"GAMES.FotoContest Mixed","channel":{"channelName":"FotoContest Mixed","channelMetadata":{"userCount":6}}},{"key":"GAMES.MauMauX 6max","channel":{"channelName":"MauMauX 6max","channelMetadata":{"userCount":6}}},{"key":"GAMES.Poker Knuddels Freeroll","channel":{"channelName":"Poker Knuddels Freeroll","channelMetadata":{"userCount":9}}},{"key":"GAMES.Poker Stundenfinale","channel":{"channelName":"Poker Stundenfinale","channelMetadata":{"userCount":9}}},{"key":"GAMES.SmileyWars","channel":{"channelName":"SmileyWars","channelMetadata":{"userCount":4}}}],"Kartenspiele":[{"key":"CARDGAMES.MauMau Kurzturnier","channel":{"channelName":"MauMau Kurzturnier","channelMetadata":{"userCount":1}}},{"key":"CARDGAMES.Poker Tourneys Stundenfinale","channel":{"channelName":"Poker Tourneys Stundenfinale","channelMetadata":{"userCount":1}}},{"key":"CARDGAMES.MauMau Kurzturnier Anmeldung","channel":{"channelName":"MauMau Kurzturnier Anmeldung","channelMetadata":{"userCount":14}}},{"key":"CARDGAMES.Poker Tourneys","channel":{"channelName":"Poker Tourneys","channelMetadata":{"userCount":1}}},{"key":"CARDGAMES.MauMauX 6max","channel":{"channelName":"MauMauX 6max","channelMetadata":{"userCount":6}}},{"key":"CARDGAMES.Poker Knuddels Freeroll","channel":{"channelName":"Poker Knuddels Freeroll","channelMetadata":{"userCount":9}}},{"key":"CARDGAMES.Poker Stundenfinale","channel":{"channelName":"Poker Stundenfinale","channelMetadata":{"userCount":9}}},{"key":"CA' +
'RDGAMES.Poker 2Kn","channel":{"channelName":"Poker 2Kn","channelMetadata":{"userCount":9}}},{"key":"CARDGAMES.Poker Lobby","channel":{"channelName":"Poker Lobby","channelMetadata":{"userCount":6}}},{"key":"CARDGAMES.Poker 50Kn","channel":{"channelName":"Poker 50Kn","channelMetadata":{"userCount":7}}}],"Lokalrunde":[{"key":"LOKALRUNDE.Karlsruhe","channel":{"channelName":"Karlsruhe","channelMetadata":{"userCount":11}}},{"key":"LOKALRUNDE.Mannheim","channel":{"channelName":"Mannheim","channelMetadata":{"userCount":31}}},{"key":"LOKALRUNDE.Freiburg","channel":{"channelName":"Freiburg","channelMetadata":{"userCount":13}}},{"key":"LOKALRUNDE.BaWü 40+","channel":{"channelName":"BaWü 40+","channelMetadata":{"userCount":11}}},{"key":"LOKALRUNDE.Hamburg","channel":{"channelName":"Hamburg","channelMetadata":{"userCount":43}}},{"key":"LOKALRUNDE.Berlin","channel":{"channelName":"Berlin","channelMetadata":{"userCount":35}}},{"key":"LOKALRUNDE.Bremen","channel":{"channelName":"Bremen","channelMetadata":{"userCount":38}}},{"key":"LOKALRUNDE.Dortmund","channel":{"channelName":"Dortmund","channelMetadata":{"userCount":33}}},{"key":"LOKALRUNDE.Essen","channel":{"channelName":"Essen","channelMetadata":{"userCount":28}}},{"key":"LOKALRUNDE.Köln","channel":{"channelName":"Köln","channelMetadata":{"userCount":28}}}],"Musik":[{"key":"MUSIC.Emo","channel":{"channelName":"Emo","channelMetadata":{"userCount":25}}},{"key":"MUSIC.Alternative","channel":{"channelName":"Alternative","channelMetadata":{"userCount":17}}},{"key":"MUSIC.Hip Hop","channel":{"channelName":"Hip Hop","channelMetadata":{"userCount":15}}},{"key":"MUSIC.Gothic","channel":{"channelName":"Gothic","channelMetadata":{"userCount":10}}},{"key":"MUSIC.Metal","channel":{"channelName":"Metal","channelMetadata":{"userCount":3}}},{"key":"MUSIC.Punk","channel":{"channelName":"Punk","channelMetadata":{"userCount":3}}},{"key":"MUSIC./Sunshine Live","channel":{"channelName":"/Sunshine Live","channelMetadata":{"userCount":3}}},{"key":"MUSIC.Techno","channel":{"channelName":"Techno","channelMetadata":{"userCount":1}}},{"key":"MUSIC.Rap","channel":{"channelName":"Rap","channelMetadata":{"userCount":2}}},{"key":"MUSIC.RnB","channel":{"channelName":"RnB","channelMetadata":{"userCount":1}}}],"Nutzerchannel":[{"key":"MYCHANNELS./Sidoh","channel":{"channelName":"/Sidoh","channelMetadata":{"userCount":34}}},{"key":"MYCHANNELS./DiceOne","channel":{"channelName":"/DiceOne","channelMetadata":{"userCount":27}}},{"key":"MYCHANNELS./Multigame","channel":{"channelName":"/Multigame","channelMetadata":{"userCount":14}}},{"key":"MYCHANNELS./ParaDICE","channel":{"channelName":"/ParaDICE","channelMetadata":{"userCount":14}}},{"key":"MYCHANNELS./Kissecke","channel":{"channelName":"/Kissecke","channelMetadata":{"userCount":8}}},{"key":"MYCHANNELS./Knuddels Area DeLuXe","channel":{"channelName":"/Knuddels Area DeLuXe","channelMetadata":{"userCount":7}}},{"key":"MYCHANNELS./Endless Video","channel":{"channelName":"/Endless Video","channelMetadata":{"userCount":4}}},{"key":"MYCHANNELS./TigerDice","channel":{"channelName":"/TigerDice","channelMetadata":{"userCount":9}}},{"key":"MYCHANNELS./Luk<3s","channel":{"channelName":"/Luk<3s","channelMetadata":{"userCount":4}}},{"key":"MYCHANNELS./Elite-Dice","channel":{"channelName":"/Elite-Dice","channelMetadata":{"userCount":6}}}],"Über 20":[{"key":"OVER20.Mamas&Papas","channel":{"channelName":"Mamas&Papas","channelMetadata":{"userCount":38}}},{"key":"OVER20.Flirt 18+","channel":{"channelName":"Flirt 18+","channelMetadata":{"userCount":35}}},{"key":"OVER20.Flirt 30+","channel":{"channelName":"Flirt 30+","channelMetadata":{"userCount":39}}},{"key":"OVER20.Private 23+","channel":{"channelName":"Private 23+","channelMetadata":{"userCount":47}}},{"key":"OVER20.Private","channel":{"channelName":"Private","channelMetadata":{"userCount":62}}},{"key":"OVER20.Suche","channel":{"channelName":"Suche","channelMetadata":{"userCount":43}}},{"key":"OVER20.Flirt 65+","channel":{"channelName":"Flirt' +
' 65+","channelMetadata":{"userCount":40}}},{"key":"OVER20.Flirt 35+","channel":{"channelName":"Flirt 35+","channelMetadata":{"userCount":41}}},{"key":"OVER20.Flirt 60+","channel":{"channelName":"Flirt 60+","channelMetadata":{"userCount":33}}},{"key":"OVER20.Flirt 40+","channel":{"channelName":"Flirt 40+","channelMetadata":{"userCount":36}}}],"Sport":[{"key":"SPORT.Fußball","channel":{"channelName":"Fußball","channelMetadata":{"userCount":2}}},{"key":"SPORT.Basketball","channel":{"channelName":"Basketball","channelMetadata":{"userCount":2}}},{"key":"SPORT./1895","channel":{"channelName":"/1895","channelMetadata":{"userCount":3}}},{"key":"SPORT.Frankfurt Fußball","channel":{"channelName":"Frankfurt Fußball","channelMetadata":{"userCount":2}}},{"key":"SPORT.Volleyball","channel":{"channelName":"Volleyball","channelMetadata":{"userCount":1}}},{"key":"SPORT.Biker","channel":{"channelName":"Biker","channelMetadata":{"userCount":1}}},{"key":"SPORT.Eishockey","channel":{"channelName":"Eishockey","channelMetadata":{"userCount":1}}},{"key":"SPORT.München Fußball","channel":{"channelName":"München Fußball","channelMetadata":{"userCount":1}}},{"key":"SPORT.Cars","channel":{"channelName":"Cars","channelMetadata":{"userCount":2}}},{"key":"SPORT.Handball","channel":{"channelName":"Handball","channelMetadata":{"userCount":1}}}],"Thementalk":[{"key":"THEMETALK.Coming Out","channel":{"channelName":"Coming Out","channelMetadata":{"userCount":34}}},{"key":"THEMETALK.Emo","channel":{"channelName":"Emo","channelMetadata":{"userCount":25}}},{"key":"THEMETALK.Alternative","channel":{"channelName":"Alternative","channelMetadata":{"userCount":17}}},{"key":"THEMETALK.Hip Hop","channel":{"channelName":"Hip Hop","channelMetadata":{"userCount":15}}},{"key":"THEMETALK.Gothic","channel":{"channelName":"Gothic","channelMetadata":{"userCount":10}}},{"key":"THEMETALK.Rollenspiele","channel":{"channelName":"Rollenspiele","channelMetadata":{"userCount":11}}},{"key":"THEMETALK.Bruchtal","channel":{"channelName":"Bruchtal","channelMetadata":{"userCount":5}}},{"key":"THEMETALK.Mobile Flirt","channel":{"channelName":"Mobile Flirt","channelMetadata":{"userCount":8}}},{"key":"THEMETALK.Mobile Talk","channel":{"channelName":"Mobile Talk","channelMetadata":{"userCount":7}}},{"key":"THEMETALK.Manga & Anime","channel":{"channelName":"Manga & Anime","channelMetadata":{"userCount":4}}}],"Unter 18":[{"key":"UNDER18.Singles 15-17","channel":{"channelName":"Singles 15-17","channelMetadata":{"userCount":48}}},{"key":"UNDER18.Kunterbunt","channel":{"channelName":"Kunterbunt","channelMetadata":{"userCount":29}}},{"key":"UNDER18.Private 15-17","channel":{"channelName":"Private 15-17","channelMetadata":{"userCount":10}}},{"key":"UNDER18.Friends","channel":{"channelName":"Friends","channelMetadata":{"userCount":7}}},{"key":"UNDER18.Flirt 16+","channel":{"channelName":"Flirt 16+","channelMetadata":{"userCount":4}}},{"key":"UNDER18.Kuschelecke","channel":{"channelName":"Kuschelecke","channelMetadata":{"userCount":2}}},{"key":"UNDER18.Friends 15-17","channel":{"channelName":"Friends 15-17","channelMetadata":{"userCount":1}}},{"key":"UNDER18.Teenflirt","channel":{"channelName":"Teenflirt","channelMetadata":{"userCount":1}}},{"key":"UNDER18.Love","channel":{"channelName":"Love","channelMetadata":{"userCount":1}}},{"key":"UNDER18.After School","channel":{"channelName":"After School","channelMetadata":{"userCount":1}}}],"Spaß":[{"key":"FUN.Lokschuppen","channel":{"channelName":"Lokschuppen","channelMetadata":{"userCount":6}}},{"key":"FUN./Video what ever x3","channel":{"channelName":"/Video what ever x3","channelMetadata":{"userCount":6}}},{"key":"FUN.Chinatown","channel":{"channelName":"Chinatown","channelMetadata":{"userCount":2}}},{"key":"FUN.Welcome!","channel":{"channelName":"Welcome!","channelMetadata":{"userCount":3}}},{"key":"FUN./DiceChampion2","channel":{"channelName":"/DiceChampion2","channelMetadata":{"userCount":1}}},{"key":"FUN.Irrenhaus","channel":{"channelName":"Irrenhaus","' +
'channelMetadata":{"userCount":1}}},{"key":"FUN.Pferdegeflüster","channel":{"channelName":"Pferdegeflüster","channelMetadata":{"userCount":1}}},{"key":"FUN.Kekse","channel":{"channelName":"Kekse","channelMetadata":{"userCount":1}}},{"key":"FUN./Chillerbox","channel":{"channelName":"/Chillerbox","channelMetadata":{"userCount":1}}},{"key":"FUN.0-8-15","channel":{"channelName":"0-8-15","channelMetadata":{"userCount":1}}}],"Liebe":[{"key":"LOVE.Coming Out","channel":{"channelName":"Coming Out","channelMetadata":{"userCount":34}}},{"key":"LOVE.Liebeskummer","channel":{"channelName":"Liebeskummer","channelMetadata":{"userCount":1}}},{"key":"LOVE.Herzschmerz","channel":{"channelName":"Herzschmerz","channelMetadata":{"userCount":1}}},{"key":"LOVE.Liebe","channel":{"channelName":"Liebe","channelMetadata":{"userCount":1}}},{"key":"LOVE./Betreten auf eigene Gefahr","channel":{"channelName":"/Betreten auf eigene Gefahr","channelMetadata":{"userCount":1}}},{"key":"LOVE./shut up","channel":{"channelName":"/shut up","channelMetadata":{"userCount":1}}},{"key":"LOVE./Hollywoodliebe","channel":{"channelName":"/Hollywoodliebe","channelMetadata":{"userCount":1}}},{"key":"LOVE./Ein Hoch auf Uns","channel":{"channelName":"/Ein Hoch auf Uns","channelMetadata":{"userCount":1}}},{"key":"LOVE./kisshall","channel":{"channelName":"/kisshall","channelMetadata":{"userCount":1}}},{"key":"LOVE./Sternmensch","channel":{"channelName":"/Sternmensch","channelMetadata":{"userCount":1}}}],"Schule & Beruf":[{"key":"JOB./Web-Dev","channel":{"channelName":"/Web-Dev","channelMetadata":{"userCount":2}}},{"key":"JOB.Hausaufgaben","channel":{"channelName":"Hausaufgaben","channelMetadata":{"userCount":1}}},{"key":"JOB.Kaffeepause","channel":{"channelName":"Kaffeepause","channelMetadata":{"userCount":5}}},{"key":"JOB.Campus","channel":{"channelName":"Campus","channelMetadata":{"userCount":1}}},{"key":"JOB.Hitzefrei","channel":{"channelName":"Hitzefrei","channelMetadata":{"userCount":1}}},{"key":"JOB./Hausaufgaben Video","channel":{"channelName":"/Hausaufgaben Video","channelMetadata":{"userCount":1}}}],"Fantasie":[{"key":"PHANTASY.Rollenspiele","channel":{"channelName":"Rollenspiele","channelMetadata":{"userCount":11}}},{"key":"PHANTASY.Bruchtal","channel":{"channelName":"Bruchtal","channelMetadata":{"userCount":5}}},{"key":"PHANTASY.Manga & Anime","channel":{"channelName":"Manga & Anime","channelMetadata":{"userCount":4}}},{"key":"PHANTASY.Vampire","channel":{"channelName":"Vampire","channelMetadata":{"userCount":3}}},{"key":"PHANTASY.Magic","channel":{"channelName":"Magic","channelMetadata":{"userCount":2}}},{"key":"PHANTASY.Nirvana","channel":{"channelName":"Nirvana","channelMetadata":{"userCount":1}}},{"key":"PHANTASY./Schneezone","channel":{"channelName":"/Schneezone","channelMetadata":{"userCount":1}}},{"key":"PHANTASY./Einhornwinterwonderland","channel":{"channelName":"/Einhornwinterwonderland","channelMetadata":{"userCount":1}}},{"key":"PHANTASY./only god forgives","channel":{"channelName":"/only god forgives","channelMetadata":{"userCount":1}}},{"key":"PHANTASY./Gedöns","channel":{"channelName":"/Gedöns","channelMetadata":{"userCount":1}}}],"Unterhaltung":[{"key":"ENTERTAINMENT.Video Chill-Out","channel":{"channelName":"Video Chill-Out","channelMetadata":{"userCount":11}}},{"key":"ENTERTAINMENT.Mobile Flirt","channel":{"channelName":"Mobile Flirt","channelMetadata":{"userCount":8}}},{"key":"ENTERTAINMENT.Mobile Talk","channel":{"channelName":"Mobile Talk","channelMetadata":{"userCount":7}}},{"key":"ENTERTAINMENT.Computer Talk","channel":{"channelName":"Computer Talk","channelMetadata":{"userCount":3}}},{"key":"ENTERTAINMENT./Vegas Dice","channel":{"channelName":"/Vegas Dice","channelMetadata":{"userCount":3}}},{"key":"ENTERTAINMENT./Russia","channel":{"channelName":"/Russia","channelMetadata":{"userCount":2}}},{"key":"ENTERTAINMENT.Mode","channel":{"channelName":"Mode","channelMetadata":{"userCount":3}}},{"key":"ENTERTAINMENT./Strawberries","channel":{"channelName"' +
':"/Strawberries","channelMetadata":{"userCount":3}}},{"key":"ENTERTAINMENT.Videogames","channel":{"channelName":"Videogames","channelMetadata":{"userCount":1}}},{"key":"ENTERTAINMENT.Video Party","channel":{"channelName":"Video Party","channelMetadata":{"userCount":1}}}],"Freizeit":[{"key":"HOBBY.Plauderecke","channel":{"channelName":"Plauderecke","channelMetadata":{"userCount":6}}},{"key":"HOBBY./Video Denny","channel":{"channelName":"/Video Denny","channelMetadata":{"userCount":1}}},{"key":"HOBBY./Lion49","channel":{"channelName":"/Lion49","channelMetadata":{"userCount":3}}},{"key":"HOBBY.Biergarten","channel":{"channelName":"Biergarten","channelMetadata":{"userCount":2}}},{"key":"HOBBY./what ever x3","channel":{"channelName":"/what ever x3","channelMetadata":{"userCount":1}}},{"key":"HOBBY.Forumstreff","channel":{"channelName":"Forumstreff","channelMetadata":{"userCount":1}}},{"key":"HOBBY.Party","channel":{"channelName":"Party","channelMetadata":{"userCount":1}}},{"key":"HOBBY.Weihnachtsmarkt","channel":{"channelName":"Weihnachtsmarkt","channelMetadata":{"userCount":2}}},{"key":"HOBBY.Chattertreffen","channel":{"channelName":"Chattertreffen","channelMetadata":{"userCount":1}}},{"key":"HOBBY./Italien","channel":{"channelName":"/Italien","channelMetadata":{"userCount":1}}}],"Videochat":[{"key":"VIDEOCHAT.Videoflirt","channel":{"channelName":"Videoflirt","channelMetadata":{"userCount":22}}},{"key":"VIDEOCHAT.Video Chill-Out","channel":{"channelName":"Video Chill-Out","channelMetadata":{"userCount":11}}},{"key":"VIDEOCHAT./Knuddels Area DeLuXe","channel":{"channelName":"/Knuddels Area DeLuXe","channelMetadata":{"userCount":7}}},{"key":"VIDEOCHAT./Endless Video","channel":{"channelName":"/Endless Video","channelMetadata":{"userCount":4}}},{"key":"VIDEOCHAT./Video what ever x3","channel":{"channelName":"/Video what ever x3","channelMetadata":{"userCount":6}}},{"key":"VIDEOCHAT./die lockererunde","channel":{"channelName":"/die lockererunde","channelMetadata":{"userCount":3}}},{"key":"VIDEOCHAT./Vegas Dice","channel":{"channelName":"/Vegas Dice","channelMetadata":{"userCount":3}}},{"key":"VIDEOCHAT./Frankfurt Video","channel":{"channelName":"/Frankfurt Video","channelMetadata":{"userCount":2}}},{"key":"VIDEOCHAT./Yanx","channel":{"channelName":"/Yanx","channelMetadata":{"userCount":3}}},{"key":"VIDEOCHAT./AdventureTime","channel":{"channelName":"/AdventureTime","channelMetadata":{"userCount":2}}}],"Channels mit Apps":[{"key":"APPCHANNELS./DiceOne","channel":{"channelName":"/DiceOne","channelMetadata":{"userCount":27}}},{"key":"APPCHANNELS./Multigame","channel":{"channelName":"/Multigame","channelMetadata":{"userCount":14}}},{"key":"APPCHANNELS./Braintainment","channel":{"channelName":"/Braintainment","channelMetadata":{"userCount":3}}},{"key":"APPCHANNELS./777","channel":{"channelName":"/777","channelMetadata":{"userCount":4}}},{"key":"APPCHANNELS./Wahrsagen","channel":{"channelName":"/Wahrsagen","channelMetadata":{"userCount":2}}},{"key":"APPCHANNELS./Lie6e","channel":{"channelName":"/Lie6e","channelMetadata":{"userCount":1}}},{"key":"APPCHANNELS./GötterDice x3","channel":{"channelName":"/GötterDice x3","channelMetadata":{"userCount":1}}},{"key":"APPCHANNELS./Schiffe versenken","channel":{"channelName":"/Schiffe versenken","channelMetadata":{"userCount":1}}},{"key":"APPCHANNELS./Spielkasino","channel":{"channelName":"/Spielkasino","channelMetadata":{"userCount":1}}},{"key":"APPCHANNELS./norbyte","channel":{"channelName":"/norbyte","channelMetadata":{"userCount":1}}}]}';


export default class PerformanceTest extends React.Component<any,any> {
    private listEntries: any = JSON.parse(data);
    private ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) =>
        r1 !== r2,
        sectionHeaderHasChanged: (s1, s2) =>
        s1 !== s2
    });

    constructor(props: any) {
        super(props);
    }

    render() {
        const newDS = this.ds.cloneWithRowsAndSections(this.listEntries);
        return (
            <View style={{flexDirection:'column', alignItems:'stretch', flex:1}}>
                <TouchableOpacity style={{height: 50, backgroundColor: 'skyblue'}} onPress={() => console.log("Click")}>
                    <Text>Test</Text>
                </TouchableOpacity>
                <ListView
                    initialListSize={1000}
                    dataSource={newDS}
                    pageSize={10}
                    renderRow={
                        (c:any,index:number) => {
                            return (
                                <View key={c.key} style={{flexDirection:'row', flex:1,alignItems:'center', marginHorizontal: SPACING.LARGE}}>
                                    <View style={{width: 32, height: 32, backgroundColor:DEFAULT_COLORS.Green}}/>
                                    <View style={{flexDirection:'column', flex:1, paddingLeft:SPACING.SMALL}}>
                                        <View
                                            style={{flexDirection:'row', paddingTop:SPACING.SMALLER + SPACING.TINY, paddingBottom:SPACING.TINY + SPACING.SMALLER}}>
                                            <Text numberOfLines={1} style={{flex:1, paddingLeft: SPACING.TINY}}>
                                                {c.channel.channelName}
                                            </Text>
                                            <Text style={{flex: 1, paddingLeft: SPACING.SMALL}}>{c.channel.channelMetadata.userCount}</Text>
                                        </View>
                                        {this.props.hasSeparator &&
                                        <View style={{
                                                    height: 1,
                                                    backgroundColor: DEFAULT_COLORS.LineDivider,
                                                    borderRadius:3}}/>
                                        }
                                    </View>
                                </View>
                            )
                        }
                    }
                    renderSectionHeader={
                    (data: any, category:any) => {
                        return (<Text>{category}</Text>);
                    }
                }>
                </ListView>
            </View>
        );
    }
}

任何想法或帮助将不胜感激。 谢谢

0 个答案:

没有答案