ReactネイティブのListViewの高さを設定する

Question

ListViewの幅と高さを設定する必要があります。幅の設定は期待どおりに動作しますが、高さの設定は効果がなく、ListViewは常に画面のほぼ底まで伸びています（画面の背景とListViewの間には余白しかありません）。

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

私も、このコマンドによって方法でその高さを設定しようとしています：

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

これはそのスタイルです

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

：メソッドをこのようにレンダリングするには、私はListViewコントロールを作成しています

このコマンドを使用して幅を設定しようとしたとき、それは機能しました。しかし高さを設定することは何もしません。

ListViewの高さ（たとえば、TextInputの場合は問題ありません）を希望する値に設定するにはどうすればよいですか？私が傷つけるのは、下の余白を使用することだけですが、それは私が使いたい方法ではありません。

私はiOSでのみテストしています（Androidの場合とは異なります）。

マイコード：

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

ラッパーとラッパーの設定高さ内部の移動のListView：ScrollView docsから

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

（リストビューがScrollViewを使用しています）：

ScrollViewsことを覚えておいてください彼らは無限の高さの子供を有界なcontaiに含んでいるので、働くためには境界のある高さを持たなければならない（スクロール対話を介して）。 ScrollViewの高さをバインドするには、ビューの高さを直接設定するか（推奨せず）、すべての親ビューに高さが設定されていることを確認します。