我需要设置 ListView 的宽度和高度。虽然设置宽度按预期工作，但设置高度没有效果，ListView 总是几乎延伸到屏幕底部(屏幕底部和 ListView 底部之间只有边距)。我以这种方式在渲染方法中创建 ListView:

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

这是它的风格:

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

我也尝试通过这个命令在一个方法中设置它的高度:

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

当我尝试使用此命令设置宽度时，它成功了。但是设置高度没有任何作用。

如何将 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);

最佳答案

将 ListView 移到 wrapper 内，并设置 wrapper 的高度:

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

来自 ScrollView docs (ListView使用ScrollView):

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height.

关于ios - 在 React Native 中设置 ListView 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41567986/