Đặt chiều cao của ListView trong React Native

Question

Tôi cần đặt chiều rộng và chiều cao của ListView. Trong khi thiết lập chiều rộng hoạt động như mong đợi, chiều cao thiết lập không có hiệu lực và ListView luôn luôn kéo dài vào gần dưới cùng của màn hình (chỉ có lề giữa bootom của màn hình và dưới cùng của ListView). Tôi tạo ListView trong Phương thức render theo cách này:

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

Đây là phong cách của nó:

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

Tôi cũng đã cố gắng để thiết lập chiều cao của nó trong một phương pháp mà theo lệnh này:

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

Khi tôi đã cố gắng thiết lập chiều rộng bằng cách sử dụng lệnh này, nó hoạt động. Nhưng thiết lập chiều cao không có gì.

Làm cách nào tôi có thể đặt chiều cao của ListView (ví dụ: trong trường hợp TextInput không phải là vấn đề) với giá trị mong muốn? Cách duy nhất tôi vết thương là sử dụng lề dưới, nhưng đó không phải là cách tôi muốn sử dụng.

Tôi chỉ đang thử nghiệm trên iOS (đối với trường hợp nó hoạt động khác trên Android).

Mã của tôi:

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 trong wrapper và thiết lập chiều cao để wrapper:

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

Từ ScrollView docs (ListView sử dụng scrollview):

Hãy ghi nhớ rằng ScrollViews phải có chiều cao giới hạn để hoạt động, vì chúng chứa các trẻ em không bị giới hạn chiều cao vào một contai bị chặn ner (thông qua tương tác cuộn). Để giới hạn chiều cao của một ScrollView, hoặc thiết lập chiều cao của khung nhìn trực tiếp (không được khuyến khích) hoặc đảm bảo rằng tất cả các khung nhìn cha mẹ đều có chiều cao giới hạn.