Ustaw wysokość ListView w React Native

Question

Potrzebuję ustawić szerokość i wysokość ListView. Podczas ustawiania szerokości działa zgodnie z oczekiwaniami, ustawienie wysokości nie ma wpływu i ListView zawsze rozciąga się prawie na dole ekranu (istnieje tylko margines między bootom ekranu i dołu ListView). Tworzę ListView w renderowanie metoda w ten sposób:

<ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> 

To jest jego styl:

stationsList: { 
    backgroundColor: 'white', 
    height: 0, 
} 

Próbowałem również ustawić jego wysokość w sposobie według tego polecenia:

this._stationsListFrom.setNativeProps({height: 200}); 

Po próbie ustawienia szerokości za pomocą tego polecenia zadziałało. Ale ustawienie wysokości nic nie robi.

Jak ustawić wysokość ListView (na przykład w przypadku TextInput nie jest to problem) na pożądaną wartość? Jedynym sposobem, w jaki się zraniłem, jest użycie dolnego marginesu, ale nie jest to sposób, w jaki chcę go użyć.

Testuję tylko na iOS (w przypadku, gdy działa inaczej na systemie Android).

Mój kod:

import React, { Component } from 'react'; 
import Dimensions from 'Dimensions'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    TextInput, 
    ListView, 
    Button, 
    View 
} from 'react-native'; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'flex-start', 
    alignItems: 'flex-start', 
    backgroundColor: '#D8CD36', 
    padding: 25 
    }, 
    label: { 
    textAlign: 'left', 
    color: '#333333', 
    fontSize: 20, 
    margin: 5, 
    }, 
    textInput: { 
    height: 40, 
    borderColor: 'black', 
    borderWidth: 2, 
    padding: 7, 
    }, 
    stationsList: { 
    backgroundColor: 'white', 
    height: 0, 
    }, 
    separator: { 
    flex: 1, 
    height: StyleSheet.hairlineWidth, 
    backgroundColor: '#8E8E8E', 
    }, 
    menuButton: { 
    }, 
    }, 
); 

export default class TestApp extends Component { 

    constructor(props) { 
    super(props); 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['Žilina', 'Košice', 'Vrútky']), }; 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.label}> 
      Z 
     </Text> 
     <TextInput ref={component => this._textInputFrom = component} style={styles.textInput} placeholder="Východzia stanica" onChangeText={this.fromTextChange.bind(this)} onLayout={(event) => { this.correctMenuFromWidth(event.nativeEvent.layout) }} renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>} /> 
     <Text style={styles.label}> 
      Do 
     </Text> 
     <TextInput style={styles.textInput} placeholder="Cieľová stanica"/> 
     <ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Button onPress={this.menuFromButtonPressed} style={styles.menuButton} title={rowData} />} /> 
     </View> 
    ); 
    } 

    correctMenuFromWidth(layout) { 
    const {x, y, width, height} = layout; 
    this._stationsListFrom.setNativeProps({marginTop: -74, width: width}); 
    } 

    menuFromButtonPressed() { 
    }; 

    fromTextChange() { 
    this._textInputFrom.setNativeProps({text: 'Kraľovany'}); 
    this._stationsListFrom.setNativeProps({height: 200}); 
    }; 

} 

AppRegistry.registerComponent('TestApp',() => TestApp); 

Answer 1

Move ListView wewnątrz opakowania i ustawić wysokość do owinięcia:

<View style={{height: 200}}> 
    <ListView .../> 
</View> 

Od ScrollView docs (ListView korzysta Scrollview):

Należy pamiętać, że ScrollViews do pracy musi mieć ograniczoną wysokość, ponieważ zawierają one dzieci o nieokreślonej wysokości w ograniczoną grupę ner (poprzez interakcję przewijania). Aby powiązać wysokość ScrollView, należy ustawić wysokość widoku bezpośrednio (odradzane) lub upewnić się, że wszystkie widoki nadrzędne mają ograniczoną wysokość.