2015-10-18 6 views
5

Dies ist der Code, den ich verwende, um eine Liste von Elementen anzuzeigen, die von einer JSON API in einer ListView zurückgegeben wurden.React-native ListView zeigt nicht den gesamten Inhalt an, springt am Ende zurück (IOS)

render(){ var listHeight = this.state.itemCount ? ((this.state.itemCount) * 115) : 0; 
     var itemsHeight = 460; 

     itemsListView = (<ListView bounces={true} style={{height: itemsHeight}} contentContainerStyle={{height: listHeight}} 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow.bind(this)} automaticallyAdjustContentInsets={false} initialListSize={4} />); } 

Die ListView-Komponente wird es mir jedoch nicht erlauben, die letzten ein oder zwei Elemente anzuzeigen. (TRIM mehr Inhalte, wenn das Gerät im Querformat ist)

Die renderRow Methode gibt Reihen von Höhe 115, wie unten dargestellt:

return (
<TouchableHighlight onPress={() => this.rowPressed(rowData)} 
    style={{height: 115}}>...</TouchableHighlight> 

was die richtige Art und Weise ist die Einstellung Listview Stils und contentContainerStyle alle Zeilen anzuzeigen in beiden Geräteorientierungen?

Antwort

3

Bearbeiten: Ich bemerkte, dass Ihre Frage über das Problem ist, wenn die Ausrichtung geändert wird oder es in der Landschaft ist. Diese Antwort wird dieses Problem wahrscheinlich nicht beheben. Aber ich lasse es hier für jetzt, wenn es hilft.

Ich hatte ähnliches Problem mit ListView, wo die unteren Elemente nicht vollständig angezeigt wurden. Ich setze gerade die Höhe des scrollbaren Bereichs auf Gerätehöhe und subtrahiere die Höhen des Headers und anderer Sachen oben.

So:

const { 
    Dimensions, 
    ListView, 
    StyleSheet 
} = React; 

const Viewport = Dimensions.get('window'); 

... 

render() { 
    return (
    <ListView ... style={styles.listView} /> 
) 
} 

... 

let styles = StyleSheet.create({ 
    listView: { 
    height: Viewport.height 
    } 
}); 

Auch Stil flex: 1 könnte Ihr Problem beheben, so dass Sie, dass zunächst versuchen.

+4

Hallo, Einstellung flex: 1 zu allen übergeordneten Komponenten löste das Problem. Vielen Dank. – meteorite

+1

Es ist nicht explizit in der Dokumentation angegeben, aber ListViews und andere ScrollViews müssen ein übergeordnetes Element mit einer Höhe größer als 0 haben. Das Festlegen von "flex: 1" ist eine Möglichkeit, das zu erreichen. – CallMeNorm

0

nicht perfekt Antwort auf die Frage, aber könnte helfen einige .. Ich hatte oben, links, rechts, aber nicht die Unterseite, und das verursachte die scrollview, um volle Höhe zu sein, so dass es wäre nicht scrollen müssen.

Verwandte Themen